assets/main.scss

@@ -36,6 +36,19 @@ 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 +87,21 @@ 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 {
+        >.container {
+            @apply items-start;
+        }
     }
 
     &-content {
@@ -90,7 +113,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 +138,30 @@ 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;
+    }
+
+    &-status {
+        @apply text-center;
+        &-icon {
+            @apply text-8xl;
+        }
+        &-text {
+            @apply text-3xl;
+        }
+    }
+
+    h2 {
+        @apply px-4;
+    }
+
     form {
         @apply flex flex-col gap-4 items-center;
     }
@@ -139,7 +180,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 +250,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/footer.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 import k_logo from '@/assets/icons/logo.svg'
+import { apiFetch } from '~/utils/apiFetch';
 
-const { data: footerData } = await useFetch<ApiFooterType[]>(`${apiBase}/footer/?ordering=small_text`)
+const { data: footerData } = await apiFetch<ApiFooterType[]>(`footer/?ordering=small_text`)
-const { data: social_networkData } = await useFetch<ApiSocial_networkType[]>(`${apiBase}/social_network/`)
+const { data: social_networkData } = await apiFetch<ApiSocial_networkType[]>(`social_network/`)
 </script>
 <template>
     <div class="footer" id="contacts">

components/header.vue

@@ -1,16 +1,7 @@
 <script setup lang="ts">
-const config = useRuntimeConfig()
+import { apiFetch } from '~/utils/apiFetch';
-const apiBase = config.public.apiBase
 
-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
-const { scrollToAnchor, scrollToTop } = useAnchorScroll({
-    toTop: {
-        scrollOptions: {
-            behavior: 'smooth',
-            offsetTop: 0,
-        }
-    },
-})
 const route = useRoute()
 </script>
 <template>
@@ -24,7 +15,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

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { getColorNameFromRal } from '@/components/ral'
 import type { ralTypes } from '@/components/ral'
+import { apiFetch } from '~/utils/apiFetch';
 
 const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
-const { data: calculatorData } = await useFetch<ApiCalcType>(`${apiBase}/calculator/5/`)
+const { data: calculatorData } = await apiFetch<ApiCalcType>(`calculator/5/`)
 const isModalOpen = useState('modal_open', () => false)
 
 const lamelle_height = useState<number>('lamelle_height')
@@ -22,6 +23,7 @@ const toggleModal = () => {
     modal_data.phone = undefined
     modal_data.name = undefined
     modal_state.show_form = false
+    modal_state.show_status = null
     isModalOpen.value = !isModalOpen.value
 }
 type modalDataType = {
@@ -39,7 +41,8 @@ const modal_form = reactive({
     errors: [],
 })
 const modal_state = reactive({
-    show_form: false
+    show_form: false,
+    show_status: null as null | 'loading' | 'success' | 'error',
 })
 const openForm = () => {
     modal_state.show_form = !modal_state.show_form
@@ -66,9 +69,11 @@ const validate = () => {
         return
     }
 }
-const submit = (e: any) => {
+const submit = async (e: any) => {
     goal('submit_form', modal_data)
-    fetch(`${apiBase}/custom_request/`, {
+    modal_state.show_status = 'loading'
+    try {
+        const res = await fetch(`${apiBase}/custom_request/`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json'
@@ -78,14 +83,15 @@ const submit = (e: any) => {
                 phone: modal_data.phone,
                 email: modal_data.email,
                 fence_info: [
-                ...Object.values(total_txt.value).map(el => el.join('\n')),
+                    ...Object.values(total_txt.value as object).map(el => el.join('\n')),
                     total_colors.value.join('\n')
                 ].join('\n\n'),
             })
         })
-    modal_data.phone = undefined
+        modal_state.show_status = 'success'
-    modal_data.name = undefined
+    } catch (error) {
-    toggleModal()
+        modal_state.show_status = 'error'
+    }
 }
 const roubleSign = new Intl.NumberFormat('ru-RU', {
     style: 'currency',
@@ -123,7 +129,7 @@ const total_txt = computed(() => {
         lam_quad_extra: discountValue * lamelles_block * lam_count * lamelle_height.value * extra_m,
     }
     // console.log(prices)
-    const extra = {
+    const extra = extra_section.value ? {
         pillar: !remove_pillar.value && {
             txt: `Дополнительная секция, столб, 1 шт`,
             value: prices.pillar * 1
@@ -132,8 +138,7 @@ const total_txt = computed(() => {
             txt: `Блок ламелей с направляющей, 1 шт`,
             value: prices.lam_quad_extra * 1
         },
-
+    } : {}
-    }
     const regular = {
         pillar: !remove_pillar.value && {
             txt: `Столб, ${(1 + sections)} шт`,
@@ -164,14 +169,29 @@ const total_txt = computed(() => {
 const goal = (target: string, params: object) => {
     const nuxtApp = useNuxtApp()
     if (nuxtApp.$metrika) {
-        nuxtApp.$metrika.reachGoal(target, params || {})
+        (nuxtApp.$metrika as any).reachGoal(target, params || {})
     }
 }
+
+const modalStatus = {
+    'loading': ["mdi:circle-arrows", 'Отправляем данные'],
+    'success': ["mdi:check-circle-outline", 'Данные отправлены'],
+    'error': ["mdi:close-circle-outline", 'Ошибка отправки'],
+}
 </script>
 <template>
     <div v-if="isModalOpen" class="modal-backdrop" @click.self="toggleModal">
         <div class="modal">
-            <template v-if="modal_state.show_form">
+            <span class="modal-close" @click="toggleModal">
+                <Icon name="mdi:close" />
+            </span>
+            <div class="modal-status" v-if="modal_state.show_status" :class="[modal_state.show_status]">
+                <div class="modal-status-icon">
+                    <Icon :name="modalStatus[modal_state.show_status][0]" />
+                </div>
+                <div class="modal-status-text">{{ modalStatus[modal_state.show_status][1] }}</div>
+            </div>
+            <template v-else-if="modal_state.show_form">
                 <h2>Оставьте контакты для связи </h2>
                 <form @submit.prevent="submit" ref="form">
                     <input type="text" placeholder="Ваше имя" v-model="modal_data.name" @keyup="validate" />
@@ -203,7 +223,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>

error.vue

@@ -3,10 +3,11 @@ const config = useRuntimeConfig()
 const apiBase = config.public.apiBase
 import '@/assets/main.scss'
 
+import { apiFetch } from './utils/apiFetch';
 import type { NuxtError } from '#app'
 import og_img from '/og_img.png'
 
-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/2`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/2`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,

nuxt.config.ts

@@ -49,7 +49,6 @@ export default defineNuxtConfig({
     "nuxt-icon",
     "nuxt-svgo",
     '@tresjs/nuxt',
-    'nuxt-anchorscroll',
     '@nuxtjs/robots',
     '@artmizu/yandex-metrika-nuxt',
   ],

package.json

@@ -10,8 +10,8 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
-    "@artmizu/yandex-metrika-nuxt": "^1.0.4",
     "@monogrid/gainmap-js": "^3.0.5",
+    "@artmizu/yandex-metrika-nuxt": "^1.0.4",
     "@nuxt/image": "^1.7.0",
     "@nuxtjs/robots": "^3.0.0",
     "@nuxtjs/tailwindcss": "^6.12.0",
@@ -23,7 +23,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",

pages/index.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
 const config = useRuntimeConfig()
-const apiBase = config.public.apiBase
 const imgBase = config.public.imgBase
 
+import { apiFetch } from '~/utils/apiFetch';
 import { marked } from 'marked';
 
 import og_img from '/og_img.png'
 
-const { data: seoData } = await useFetch<ApiKpType>(`${apiBase}/kp/1`)
+const { data: seoData } = await apiFetch<ApiKpType>(`kp/1`)
 useSeoMeta({
     title: seoData.value?.title,
     ogTitle: seoData.value?.title,
@@ -17,10 +17,10 @@ useSeoMeta({
     // twitterCard: 'summary_large_image',
 })
 
-const { data: pagesData } = await useFetch<ApiPagesType[]>(`${apiBase}/pages/?ordering=order`)
+const { data: pagesData } = await apiFetch<ApiPagesType[]>(`pages/?ordering=order`)
 
-const { data: reviewsData } = await useFetch<ApiReviewsType[]>(`${apiBase}/review/`)
+const { data: reviewsData } = await apiFetch<ApiReviewsType[]>(`review/`)
-const { data: calculatorData } = await useFetch(`${apiBase}/calculator/5/`)
+const { data: calculatorData } = await apiFetch(`calculator/5/`)
 
 const about = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'about')
 const reviews = (pagesData.value as ApiPagesType[]).find(el => el.slug == 'clients')
@@ -42,7 +42,7 @@ const advantagesText = computed(() => {
     return marked.parse(c)
 })
 
-const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advantage/`)
+const { data: advData } = await apiFetch<ApiAdvantageType[]>(`advantage/`)
 </script>
 <template>
     <div>
@@ -69,14 +69,16 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
         </div>
         <div class="siteblock siteblock_imgbg bg-slate-500"
             :style="[{ backgroundImage: `url(${[imgBase, reviews?.image].join('/')})` }]" v-if="reviews">
-            <NuxtImg :src="[imgBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp" loading="lazy" />
+            <NuxtImg :src="[imgBase, reviews?.image].join('/')" class="invisible" alt="отзыв" title="" format="webp"
+                loading="lazy" />
         </div>
         <div class="siteblock bg-white" :id="reviews?.slug" v-if="reviews">
             <div class="container">
                 <template v-for="item in reviewsData?.slice(0, 3)">
                     <div class="review">
                         <div class="review-image">
-                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp" loading="lazy" />
+                            <NuxtImg :src="[imgBase, item.image].join('/')" :alt="item.text" title="" format="webp"
+                                loading="lazy" />
                         </div>
                         <div class="review-content">
                             {{ item.comment }}
@@ -109,7 +111,7 @@ const { data: advData } = await useFetch<ApiAdvantageType[]>(`${apiBase}/advanta
                 <LazyCalcModels />
             </Suspense>
         </div>
-        <div class="siteblock bg-white" :id="delivery?.slug" v-if="deliveryText">
+        <div class="siteblock bg-white siteblock_content" :id="delivery?.slug" v-if="deliveryText">
             <div class="container">
                 <div class="prose col-span-12 xl:col-span-6">
                     <span v-html="deliveryText[0]"></span>

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>

utils/apiFetch.ts

@@ -0,0 +1,10 @@
+export async function apiFetch<T>(path: string) {
+    const config = useRuntimeConfig()
+    const apiBase = config.public.apiBase
+    const headers = new Headers()
+    headers.set('Referer', config.public.baseUrl)
+    return useFetch<T>(`${apiBase}/${path}`, {
+        baseURL: config.public.baseUrl,
+        headers
+    })
+}