assets/main.scss

@@ -36,6 +36,18 @@ body {
 
 .menu {
     @apply col-span-8 flex justify-between;
+
+    a {
+        @apply underline decoration-0 underline-offset-4 decoration-dotted hover:decoration-transparent transition-all;
+    }
+
+    a[href^=http] {
+        @apply relative no-underline;
+        &:after {
+            content: '↷';
+            @apply ml-2;
+        }
+    }
 }
 
 a[href^="#"] {
@@ -74,11 +86,15 @@ a[href^="#"] {
     @apply py-10;
 
     &_imgbg {
-        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh];
+        @apply py-0 bg-no-repeat bg-cover bg-bottom h-[50vh] min-h-[600px];
     }
 
     &_calc {
         @apply py-0;
+
+        &-canvas {
+            @apply relative h-[50vh] min-h-[600px];
+        }
     }
 
     &-content {
@@ -90,7 +106,7 @@ a[href^="#"] {
     }
 
     &-title {
-        @apply col-span-full 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 leading-[0.85] tracking-tight mb-[3.15rem]
     }
 
     &-image {
@@ -115,12 +131,20 @@ a[href^="#"] {
 }
 
 .modal {
-    @apply bg-white p-10 border rounded shadow prose ;
+    @apply relative bg-white p-5 lg:p-10 border rounded shadow prose;
 
     &-backdrop {
         @apply fixed top-0 left-0 right-0 bottom-0 bg-white bg-opacity-70 flex items-center justify-center z-30;
     }
 
+    &-close {
+        @apply absolute right-4 top-4 text-4xl opacity-50;
+    }
+
+    h2 {
+        @apply px-4;
+    }
+
     form {
         @apply flex flex-col gap-4 items-center;
     }
@@ -139,7 +163,7 @@ textarea {
 }
 
 button {
-    @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;
+    @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-5 lg:leading-4;
 
     &.neutral,
     &[type="reset"] {
@@ -209,8 +233,10 @@ button {
 
 .canvas-icons {
     @apply absolute text-3xl top-0 left-0 flex flex-col;
+
     a {
         @apply cursor-pointer;
+
         &.disabled {
             @apply cursor-not-allowed opacity-50 pointer-events-none;
         }

components/calcModels.vue

@@ -46,34 +46,6 @@ const loadAll = async () => {
     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
-
-    const pbrTexture = await useTexture({
-        map: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Color.png',
-        displacementMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Displacement.png',
-        // roughnessMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_Roughness.png',
-        normalMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_NormalDX.png',
-        aoMap: '/texture/Grass004_2K-PNG/Grass004_2K-PNG_AmbientOcclusion.png',
-    })
-    const repeat = 10
-    for (const key in pbrTexture) {
-        if (Object.prototype.hasOwnProperty.call(pbrTexture, key)) {
-            const key_p = key as keyof typeof pbrTexture
-            const element = pbrTexture[key_p]
-            if (element && element.wrapS) {
-                element.wrapS = RepeatWrapping
-                element.wrapT = RepeatWrapping
-                element.repeat.x = repeat
-                element.repeat.y = repeat
-                element.flipY = false
-            }
-        }
-    }
-    groundMaterial.value = Object.assign(groundMaterial.value, {
-        map: pbrTexture.map,
-        displacementMap: pbrTexture.displacementMap,
-        normalMap: pbrTexture.normalMap,
-        aoMap: pbrTexture.aoMap,
-    })
 }
 const camera = ref("camera")
 
@@ -89,7 +61,7 @@ watch([section_count, extra_section], () => {
 })
 </script>
 <template>
-    <div class="container min-w-full relative h-[50vh] min-h-[600px]">
+    <div class="container min-w-full siteblock_calc-canvas">
         <ClientOnly fallback-tag="div">
             <template #fallback>
                 <div class="fallback">

components/calcValues.vue

@@ -234,7 +234,7 @@ const goal = (target: string, params: object) => {
                     </p>
                 </template>
             </div>
-            <div class="prose col-span-4">
+            <div class="prose col-span-12 lg:col-span-4">
                 <p v-if="form_state.extra_section" class="text-ioprim">
                     Внимание! Дополнительная секция приводит к увеличению стоимости.
                     Рекомендуем вам изменить длину забора или длину секции!

components/header.vue

@@ -3,14 +3,6 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 
 const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
-const { scrollToAnchor, scrollToTop } = useAnchorScroll({
-    toTop: {
-        scrollOptions: {
-            behavior: 'smooth',
-            offsetTop: 0,
-        }
-    },
-})
 const route = useRoute()
 </script>
 <template>
@@ -24,7 +16,7 @@ const route = useRoute()
             <div class="menu">
                 <template v-for="item in pagesData">
                     <NuxtLink :to="item.external_link || ((route.name == 'index' ? '' : '/') + `#${item.slug}`)"
-                        :target="item.external_link ? '_blank' : '_self'" @click="scrollToAnchor(item.slug)">
+                        :target="item.external_link ? '_blank' : '_self'">
                         {{ item.menu_title }}
                     </NuxtLink>
                 </template>

components/modal.vue

@@ -170,6 +170,9 @@ const goal = (target: string, params: object) => {
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
         <div class="modal">
+            <span class="modal-close" @click="toggleModal">
+                <Icon name="mdi:close" />
+            </span>
             <template v-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
                 <form @submit.prevent="submit" ref="form">
@@ -202,7 +205,7 @@ const goal = (target: string, params: object) => {
                     </template>
                 </div>
                 <div class="flex gap-4 justify-center">
-                    <button class="not-prose" @click="openForm">Отправить расчет на e-mail</button>
+                    <button class="not-prose" @click="openForm">Отправить расчет на <nobr>e-mail</nobr></button>
                 </div>
             </template>
         </div>

package.json

@@ -11,7 +11,6 @@
   },
   "dependencies": {
     "@artmizu/yandex-metrika-nuxt": "^1.0.4",
-    "@monogrid/gainmap-js": "^3.0.5",
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
@@ -23,7 +22,6 @@
     "imagemin-pngquant": "^10.0.0",
     "marked": "^12.0.2",
     "nuxt": "^3.11.2",
-    "nuxt-anchorscroll": "^1.0.3",
     "nuxt-icon": "^0.6.10",
     "nuxt-svgo": "^4.0.1",
     "sass": "^1.77.4",

plugins/scroll.ts

@@ -0,0 +1,7 @@
+export default defineNuxtPlugin((nuxtApp) => {
+    nuxtApp.$router.options.scrollBehavior = (to, from, savedPosition) => {
+        if (to.hash) {
+            return { el: to.hash, behavior: 'smooth', }
+        }
+    }
+})

public/texture/Grass004_2K-PNG/Grass004_2K-PNG.mtlx

@@ -1,42 +0,0 @@
-<?xml version="1.0"?>
-<materialx version="1.38" fileprefix="./">
-  <standard_surface ypos="-1.879310" name="Grass004_2K_PNG_StandardSurface" type="surfaceshader" xpos="6.159420">
-    <input name="specular" type="float" value="0" />
-    <input name="coat" type="float" value="1" />
-    <input name="coat_color" type="color3" value="1, 1, 1" />
-    <input name="base" type="float" value="1" />
-    <input name="base_color" type="color3" nodename="Grass004_2K_PNG_Color" />
-    <input name="normal" type="vector3" nodename="normalmap" />
-    <input name="coat_normal" type="vector3" nodename="normalmap" />
-    <input name="specular_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
-    <input name="coat_roughness" type="float" nodename="Grass004_2K_PNG_Roughness" />
-  </standard_surface>
-  <surfacematerial ypos="0.000000" name="Grass004_2K_PNG" type="material" xpos="8.695652">
-    <input name="surfaceshader" type="surfaceshader" nodename="Grass004_2K_PNG_StandardSurface" />
-    <input name="displacementshader" type="displacementshader" nodename="displacement" />
-  </surfacematerial>
-  <tiledimage ypos="-3.103448" name="Grass004_2K_PNG_Color" type="color3" xpos="3.623188">
-    <input colorspace="srgb_texture" name="file" type="filename" value="Grass004_2K-PNG_Color.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <tiledimage ypos="5.163793" name="Grass004_2K_PNG_Displacement" type="float" xpos="3.623188">
-    <input name="file" type="filename" value="Grass004_2K-PNG_Displacement.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <displacement ypos="1.879310" name="displacement" type="displacementshader" xpos="6.159420">
-    <input name="displacement" type="float" nodename="Grass004_2K_PNG_Displacement" />
-    <input name="scale" type="float" value="1.0" />
-  </displacement>
-  <tiledimage ypos="0.879310" name="Grass004_2K_PNG_NormalGL" type="vector3" xpos="1.086957">
-    <input name="file" type="filename" value="Grass004_2K-PNG_NormalGL.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-  <normalmap ypos="3.586207" name="normalmap" type="vector3" xpos="3.623188">
-    <input name="in" type="vector3" nodename="Grass004_2K_PNG_NormalGL" />
-    <input name="scale" type="float" value="1.0" />
-  </normalmap>
-  <tiledimage ypos="-0.413793" name="Grass004_2K_PNG_Roughness" type="float" xpos="3.623188">
-    <input name="file" type="filename" value="Grass004_2K-PNG_Roughness.png" />
-    <input name="uvtiling" type="vector2" value="1.0, 1.0" />
-  </tiledimage>
-</materialx>