{"id":32,"date":"2025-03-28T16:02:03","date_gmt":"2025-03-28T13:02:03","guid":{"rendered":"https:\/\/22-22.su\/?p=32"},"modified":"2026-09-15T23:32:34","modified_gmt":"2026-09-15T20:32:34","slug":"32","status":"publish","type":"post","link":"https:\/\/22-22.su\/?p=32","title":{"rendered":"\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0442\u0435\u0440\u0440\u0430\u0441\u044b"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"32\" class=\"elementor elementor-32\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4b5fbefa e-con-full e-flex e-con e-parent\" data-id=\"4b5fbefa\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4dc65a02 elementor-widget elementor-widget-text-editor\" data-id=\"4dc65a02\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t\n<div class=\"wp-block-buttons is-layout-flex wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-base-2-color has-contrast-3-background-color has-text-color has-background has-link-color wp-element-button\" href=\"https:\/\/22-22.su\/?page_id=79\">\u0422\u0435\u043d\u0434\u0435\u0440\u043d\u044b\u0439 \u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440<\/a><\/div>\n<\/div>\n\n\n\n<div class=\"calculator\">\n    <h2>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u043c\u0435\u0442\u044b<\/h2>\n    <label for=\"category\">\u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f:<\/label>\n    <select id=\"category\" onchange=\"updateFields()\">\n        <option value=\"terrace\">\u0422\u0435\u0440\u0440\u0430\u0441\u044b<\/option>\n        <option value=\"fence\">\u0417\u0430\u0431\u043e\u0440\u044b<\/option>\n        <option value=\"facade\">\u0424\u0430\u0441\u0430\u0434\u044b<\/option>\n        <option value=\"metal\">\u041c\u0435\u0442\u0430\u043b\u043b\u043e\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438<\/option>\n        <option value=\"subsystem\">\u041f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b<\/option>\n        <option value=\"piles\">\u0421\u0432\u0430\u0439\u043d\u044b\u0435 \u043f\u043e\u043b\u044f<\/option>\n    <\/select>\n\n    <div id=\"inputFields\"><\/div>\n\n    <button onclick=\"calculate()\">\u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c<\/button>\n    <div id=\"result\"><\/div>\n\n    <style>\n        .calculator {\n            font-family: -apple-system, BlinkMacSystemFont, \"San Francisco\", \"Helvetica Neue\", Arial, sans-serif;\n            background-color: #fff;\n            padding: 20px;\n            border-radius: 18px;\n            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n            width: 100%;\n            max-width: 450px;\n            margin: 20px auto;\n            color: #1d1d1f;\n        }\n        .calculator h2 {\n            font-size: 24px;\n            font-weight: 600;\n            margin-bottom: 20px;\n            text-align: center;\n        }\n        .calculator label {\n            display: block;\n            font-size: 14px;\n            font-weight: 500;\n            margin-bottom: 5px;\n        }\n        .calculator input, .calculator select {\n            width: 100%;\n            padding: 10px;\n            margin-bottom: 15px;\n            border: 1px solid #d2d2d7;\n            border-radius: 8px;\n            font-size: 16px;\n            box-sizing: border-box;\n            background-color: #f5f5f7;\n            outline: none;\n        }\n        .calculator input:focus, .calculator select:focus {\n            border-color: #007aff;\n        }\n        .calculator button {\n            width: 100%;\n            padding: 12px;\n            background-color: #007aff;\n            color: #fff;\n            border: none;\n            border-radius: 8px;\n            font-size: 16px;\n            font-weight: 600;\n            cursor: pointer;\n            transition: background-color 0.2s;\n        }\n        .calculator button:hover {\n            background-color: #005bb5;\n        }\n        #result {\n            margin-top: 20px;\n            padding: 10px;\n            background-color: #f5f5f7;\n            border-radius: 8px;\n            font-size: 14px;\n            line-height: 1.5;\n        }\n        #result strong {\n            font-weight: 600;\n            color: #007aff;\n        }\n        #result hr {\n            border: 0;\n            border-top: 1px solid #d2d2d7;\n            margin: 10px 0;\n        }\n    <\/style>\n\n    <script>\n        function updateFields() {\n            const category = document.getElementById(\"category\").value;\n            const inputFields = document.getElementById(\"inputFields\");\n            let fieldsHTML = \"\";\n\n            if (category === \"terrace\") {\n                fieldsHTML = `\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 \u0442\u0435\u0440\u0440\u0430\u0441\u044b (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"width\">\u0428\u0438\u0440\u0438\u043d\u0430 \u0442\u0435\u0440\u0440\u0430\u0441\u044b (\u043c):<\/label>\n                    <input type=\"number\" id=\"width\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0448\u0438\u0440\u0438\u043d\u0443\">\n                    <label for=\"boardLength\">\u0414\u043b\u0438\u043d\u0430 \u0434\u043e\u0441\u043a\u0438 \u0414\u041f\u041a (\u043c):<\/label>\n                    <input type=\"number\" id=\"boardLength\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443 \u0434\u043e\u0441\u043a\u0438\">\n                    <label for=\"boardWidth\">\u0428\u0438\u0440\u0438\u043d\u0430 \u0434\u043e\u0441\u043a\u0438 \u0414\u041f\u041a (\u043c):<\/label>\n                    <input type=\"number\" id=\"boardWidth\" min=\"0\" step=\"0.01\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0448\u0438\u0440\u0438\u043d\u0443 \u0434\u043e\u0441\u043a\u0438\">\n                    <label for=\"dpkCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0414\u041f\u041a (\u0440\u0443\u0431\/\u043c.\u043f.):<\/label>\n                    <input type=\"number\" id=\"dpkCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0414\u041f\u041a\">\n                    <label for=\"frame\">\u041a\u0430\u0440\u043a\u0430\u0441:<\/label>\n                    <select id=\"frame\">\n                        <option value=\"none\">\u0411\u0435\u0437 \u043a\u0430\u0440\u043a\u0430\u0441\u0430<\/option>\n                        <option value=\"metalSingle\">\u041c\u0435\u0442\u0430\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0439 (\u043e\u0434\u043d\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439)<\/option>\n                        <option value=\"metalDouble\">\u041c\u0435\u0442\u0430\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0439 (\u0434\u0432\u0443\u0445\u0441\u043b\u043e\u0439\u043d\u044b\u0439)<\/option>\n                        <option value=\"dpkLags\">\u041b\u0430\u0433\u0438 \u0414\u041f\u041a<\/option>\n                    <\/select>\n                    <label for=\"metalCost6080\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044f 60\u044580 (\u0440\u0443\u0431\/\u043c.\u043f.):<\/label>\n                    <input type=\"number\" id=\"metalCost6080\" min=\"0\" step=\"0.1\" placeholder=\"\u0414\u043b\u044f \u0434\u0432\u0443\u0445\u0441\u043b\u043e\u0439\u043d\u043e\u0433\u043e \u043a\u0430\u0440\u043a\u0430\u0441\u0430\">\n                    <label for=\"metalCost6040\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044f 60\u044540 (\u0440\u0443\u0431\/\u043c.\u043f.):<\/label>\n                    <input type=\"number\" id=\"metalCost6040\" min=\"0\" step=\"0.1\" placeholder=\"\u0414\u043b\u044f \u043e\u0434\u043d\u043e- \u0438 \u0434\u0432\u0443\u0445\u0441\u043b\u043e\u0439\u043d\u043e\u0433\u043e\">\n                    <label for=\"dpkLagCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043b\u0430\u0433 \u0414\u041f\u041a (\u0440\u0443\u0431\/\u043c.\u043f.):<\/label>\n                    <input type=\"number\" id=\"dpkLagCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0414\u043b\u044f \u043b\u0430\u0433 \u0414\u041f\u041a\">\n                    <label for=\"edgeCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0442\u043e\u0440\u0446\u0435\u0432\u043e\u0433\u043e \u0443\u0433\u043b\u0430 (\u0440\u0443\u0431\/\u043c.\u043f.):<\/label>\n                    <input type=\"number\" id=\"edgeCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0443\u0433\u043b\u0430\">\n                    <label for=\"startClipCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u043e\u0439 \u043a\u043b\u0438\u043f\u0441\u044b (\u0440\u0443\u0431\/\u0448\u0442.):<\/label>\n                    <input type=\"number\" id=\"startClipCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043a\u043b\u0438\u043f\u0441\u044b\">\n                    <label for=\"rowClipCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u044f\u0434\u043e\u0432\u043e\u0439 \u043a\u043b\u0438\u043f\u0441\u044b (\u0440\u0443\u0431\/\u0448\u0442.):<\/label>\n                    <input type=\"number\" id=\"rowClipCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043a\u043b\u0438\u043f\u0441\u044b\">\n                `;\n            } else if (category === \"fence\") {\n                fieldsHTML = `\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"height\">\u0412\u044b\u0441\u043e\u0442\u0430 (\u043c):<\/label>\n                    <input type=\"number\" id=\"height\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u044b\u0441\u043e\u0442\u0443\">\n                    <label for=\"materialCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 (\u0440\u0443\u0431\/\u043c\u00b2):<\/label>\n                    <input type=\"number\" id=\"materialCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\">\n                `;\n            } else if (category === \"facade\") {\n                fieldsHTML = `\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"width\">\u0428\u0438\u0440\u0438\u043d\u0430 (\u043c):<\/label>\n                    <input type=\"number\" id=\"width\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0448\u0438\u0440\u0438\u043d\u0443\">\n                    <label for=\"materialCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043c\u0430\u0442\u0435\u0440\u0438\u0430\u043b\u0430 (\u0440\u0443\u0431\/\u043c\u00b2):<\/label>\n                    <input type=\"number\" id=\"materialCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\">\n                `;\n            } else if (category === \"metal\") {\n                fieldsHTML = `\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"weight\">\u0412\u0435\u0441 1 \u043c (\u043a\u0433):<\/label>\n                    <input type=\"number\" id=\"weight\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0432\u0435\u0441\">\n                    <label for=\"materialCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (\u0440\u0443\u0431\/\u043a\u0433):<\/label>\n                    <input type=\"number\" id=\"materialCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\">\n                `;\n            } else if (category === \"subsystem\") {\n                fieldsHTML = `\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 \u043f\u0440\u043e\u0444\u0438\u043b\u044f (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"count\">\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u0440\u043e\u0444\u0438\u043b\u0435\u0439:<\/label>\n                    <input type=\"number\" id=\"count\" min=\"0\" step=\"1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\">\n                    <label for=\"materialCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043f\u0440\u043e\u0444\u0438\u043b\u044f (\u0440\u0443\u0431\/\u043c):<\/label>\n                    <input type=\"number\" id=\"materialCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\">\n                `;\n            } else if (category === \"piles\") {\n                fieldsHTML = `\n                    <label for=\"count\">\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0430\u0439:<\/label>\n                    <input type=\"number\" id=\"count\" min=\"0\" step=\"1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e\">\n                    <label for=\"length\">\u0414\u043b\u0438\u043d\u0430 \u043e\u0434\u043d\u043e\u0439 \u0441\u0432\u0430\u0438 (\u043c):<\/label>\n                    <input type=\"number\" id=\"length\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0434\u043b\u0438\u043d\u0443\">\n                    <label for=\"materialCost\">\u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043e\u0434\u043d\u043e\u0439 \u0441\u0432\u0430\u0438 (\u0440\u0443\u0431):<\/label>\n                    <input type=\"number\" id=\"materialCost\" min=\"0\" step=\"0.1\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c\">\n                `;\n            }\n\n            inputFields.innerHTML = fieldsHTML;\n        }\n\n        function calculate() {\n            const category = document.getElementById(\"category\").value;\n            const resultDiv = document.getElementById(\"result\");\n            let resultHTML = \"\";\n\n            if (category === \"terrace\") {\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const width = parseFloat(document.getElementById(\"width\").value) || 0;\n                const boardLength = parseFloat(document.getElementById(\"boardLength\").value) || 0;\n                const boardWidth = parseFloat(document.getElementById(\"boardWidth\").value) || 0;\n                const dpkCost = parseFloat(document.getElementById(\"dpkCost\").value) || 0;\n                const frame = document.getElementById(\"frame\").value;\n                const metalCost6080 = parseFloat(document.getElementById(\"metalCost6080\").value) || 0;\n                const metalCost6040 = parseFloat(document.getElementById(\"metalCost6040\").value) || 0;\n                const dpkLagCost = parseFloat(document.getElementById(\"dpkLagCost\").value) || 0;\n                const edgeCost = parseFloat(document.getElementById(\"edgeCost\").value) || 0;\n                const startClipCost = parseFloat(document.getElementById(\"startClipCost\").value) || 0;\n                const rowClipCost = parseFloat(document.getElementById(\"rowClipCost\").value) || 0;\n\n                const area = length * width;\n                const boardsAcrossWidth = Math.ceil(width \/ boardWidth);\n                const totalBoardLength = boardsAcrossWidth * length;\n                const boardCount = Math.ceil(totalBoardLength \/ boardLength);\n                const dpkTotalCost = totalBoardLength * dpkCost;\n\n                let frameDetails = \"\";\n                let frameTotalCost = 0;\n\n                if (frame !== \"none\") {\n                    if (frame === \"metalSingle\") {\n                        const step = 0.35;\n                        const lagLength = 6;\n                        const baseLagCount = Math.ceil(length \/ step) + 1;\n                        const joints = Math.floor(length \/ boardLength);\n                        const totalLagCountPerRow = baseLagCount + joints;\n                        const rowsNeeded = Math.ceil(width \/ lagLength);\n                        const frameCount = totalLagCountPerRow * rowsNeeded;\n                        const frameLength = frameCount * lagLength;\n                        frameTotalCost = frameLength * metalCost6040;\n\n                        frameDetails = `\n                            <strong>\u041a\u0430\u0440\u043a\u0430\u0441: \u041c\u0435\u0442\u0430\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0439 (\u043e\u0434\u043d\u043e\u0441\u043b\u043e\u0439\u043d\u044b\u0439)<\/strong><br>\n                            \u041f\u0440\u043e\u0444\u0438\u043b\u044c: 60\u044540<br>\n                            \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u0430\u0433 (6 \u043c): ${frameCount} \u0448\u0442.<br>\n                            \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${frameLength.toFixed(2)} \u043c<br>\n                            \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${metalCost6040} \u0440\u0443\u0431\/\u043c.\u043f.): ${frameTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                        `;\n                    } else if (frame === \"metalDouble\") {\n                        const stepLayer1 = 1.5;\n                        const lagLengthLayer1 = 6;\n                        const lagCountLayer1 = Math.ceil(length \/ stepLayer1) + 1;\n                        const rowsNeededLayer1 = Math.ceil(width \/ lagLengthLayer1);\n                        const frameCountLayer1 = lagCountLayer1 * rowsNeededLayer1;\n                        const frameLengthLayer1 = frameCountLayer1 * lagLengthLayer1;\n                        const frameCostLayer1 = frameLengthLayer1 * metalCost6080;\n\n                        const stepLayer2 = 0.35;\n                        const lagLengthLayer2 = 6;\n                        const baseLagCountLayer2 = Math.ceil(width \/ stepLayer2) + 1;\n                        const rowsNeededLayer2 = Math.ceil(length \/ lagLengthLayer2);\n                        const frameCountLayer2 = baseLagCountLayer2 * rowsNeededLayer2;\n                        const frameLengthLayer2 = frameCountLayer2 * lagLengthLayer2;\n                        const frameCostLayer2 = frameLengthLayer2 * metalCost6040;\n\n                        frameTotalCost = frameCostLayer1 + frameCostLayer2;\n\n                        frameDetails = `\n                            <strong>\u041a\u0430\u0440\u043a\u0430\u0441: \u041c\u0435\u0442\u0430\u043b\u043b\u0438\u0447\u0435\u0441\u043a\u0438\u0439 (\u0434\u0432\u0443\u0445\u0441\u043b\u043e\u0439\u043d\u044b\u0439)<\/strong><br>\n                            <strong>\u041f\u0435\u0440\u0432\u044b\u0439 \u0441\u043b\u043e\u0439 (60\u044580, \u0448\u0430\u0433 1.5 \u043c):<\/strong><br>\n                            \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u0430\u0433 (6 \u043c): ${frameCountLayer1} \u0448\u0442.<br>\n                            \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${frameLengthLayer1.toFixed(2)} \u043c<br>\n                            \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${metalCost6080} \u0440\u0443\u0431\/\u043c.\u043f.): ${frameCostLayer1.toFixed(2)} \u0440\u0443\u0431.<br>\n                            <strong>\u0412\u0442\u043e\u0440\u043e\u0439 \u0441\u043b\u043e\u0439 (60\u044540, \u0448\u0430\u0433 0.35 \u043c):<\/strong><br>\n                            \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u0430\u0433 (6 \u043c): ${frameCountLayer2} \u0448\u0442.<br>\n                            \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${frameLengthLayer2.toFixed(2)} \u043c<br>\n                            \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${metalCost6040} \u0440\u0443\u0431\/\u043c.\u043f.): ${frameCostLayer2.toFixed(2)} \u0440\u0443\u0431.<br>\n                            <strong>\u041e\u0431\u0449\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u043a\u0430\u0440\u043a\u0430\u0441\u0430:<\/strong> ${frameTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                        `;\n                    } else if (frame === \"dpkLags\") {\n                        const step = 0.35;\n                        const lagLength = 3;\n                        const baseLagCount = Math.ceil(length \/ step) + 1;\n                        const joints = Math.floor(length \/ boardLength);\n                        const totalLagCountPerRow = baseLagCount + joints;\n                        const rowsNeeded = Math.ceil(width \/ lagLength);\n                        const frameCount = totalLagCountPerRow * rowsNeeded;\n                        const frameLength = frameCount * lagLength;\n                        frameTotalCost = frameLength * dpkLagCost;\n\n                        frameDetails = `\n                            <strong>\u041a\u0430\u0440\u043a\u0430\u0441: \u041b\u0430\u0433\u0438 \u0414\u041f\u041a<\/strong><br>\n                            \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043b\u0430\u0433 (3 \u043c): ${frameCount} \u0448\u0442.<br>\n                            \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${frameLength.toFixed(2)} \u043c<br>\n                            \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${dpkLagCost} \u0440\u0443\u0431\/\u043c.\u043f.): ${frameTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                        `;\n                    }\n                }\n\n                const perimeter = 2 * (length + width);\n                const edgeLength = 3;\n                const edgeCount = Math.ceil(perimeter \/ edgeLength);\n                const edgeTotalLength = edgeCount * edgeLength;\n                const edgeTotalCost = edgeTotalLength * edgeCost;\n\n                const step = 0.35;\n                const startClipCount = Math.ceil(length \/ step) * 2;\n                const startClipTotalCost = startClipCount * startClipCost;\n                const rowClipCount = Math.ceil(area * 23);\n                const rowClipTotalCost = rowClipCount * rowClipCost;\n\n                const totalCost = dpkTotalCost + frameTotalCost + edgeTotalCost + startClipTotalCost + rowClipTotalCost;\n\n                resultHTML += `\n                    <strong>\u041f\u043b\u043e\u0449\u0430\u0434\u044c \u0442\u0435\u0440\u0440\u0430\u0441\u044b:<\/strong> ${area.toFixed(2)} \u043c\u00b2<br>\n                    <hr>\n                    <strong>\u0414\u041f\u041a:<\/strong><br>\n                    \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${totalBoardLength.toFixed(2)} \u043c<br>\n                    \u041a\u0432\u0430\u0434\u0440\u0430\u0442\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${area.toFixed(2)} \u043c\u00b2<br>\n                    \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0434\u043e\u0441\u043e\u043a (${boardLength} \u043c x ${boardWidth} \u043c): ${boardCount} \u0448\u0442.<br>\n                    \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${dpkCost} \u0440\u0443\u0431\/\u043c.\u043f.): ${dpkTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                    <hr>\n                    ${frameDetails ? frameDetails + \"<hr>\" : \"\"}\n                    <strong>\u0422\u043e\u0440\u0446\u0435\u0432\u043e\u0439 \u0443\u0433\u043e\u043b:<\/strong><br>\n                    \u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0443\u0433\u043b\u043e\u0432 (3 \u043c): ${edgeCount} \u0448\u0442.<br>\n                    \u041f\u043e\u0433\u043e\u043d\u043d\u044b\u0435 \u043c\u0435\u0442\u0440\u044b: ${edgeTotalLength.toFixed(2)} \u043c<br>\n                    \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c (${edgeCost} \u0440\u0443\u0431\/\u043c.\u043f.): ${edgeTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                    <hr>\n                    <strong>\u041a\u0440\u0435\u043f\u0435\u0436:<\/strong><br>\n                    \u0421\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0435 \u043a\u043b\u0438\u043f\u0441\u044b (\u0448\u0430\u0433 0.35 \u043c): ${startClipCount} \u0448\u0442.<br>\n                    \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0441\u0442\u0430\u0440\u0442\u043e\u0432\u044b\u0445 (${startClipCost} \u0440\u0443\u0431\/\u0448\u0442.): ${startClipTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                    \u0420\u044f\u0434\u043e\u0432\u044b\u0435 \u043a\u043b\u0438\u043f\u0441\u044b (23 \u0448\u0442\/\u043c\u00b2): ${rowClipCount} \u0448\u0442.<br>\n                    \u0421\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0440\u044f\u0434\u043e\u0432\u044b\u0445 (${rowClipCost} \u0440\u0443\u0431\/\u0448\u0442.): ${rowClipTotalCost.toFixed(2)} \u0440\u0443\u0431.<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            } else if (category === \"fence\") {\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const height = parseFloat(document.getElementById(\"height\").value) || 0;\n                const materialCost = parseFloat(document.getElementById(\"materialCost\").value) || 0;\n                const area = length * height;\n                const totalCost = area * materialCost;\n                resultHTML += `\n                    <strong>\u041f\u043b\u043e\u0449\u0430\u0434\u044c:<\/strong> ${area.toFixed(2)} \u043c\u00b2<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            } else if (category === \"facade\") {\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const width = parseFloat(document.getElementById(\"width\").value) || 0;\n                const materialCost = parseFloat(document.getElementById(\"materialCost\").value) || 0;\n                const area = length * width;\n                const totalCost = area * materialCost;\n                resultHTML += `\n                    <strong>\u041f\u043b\u043e\u0449\u0430\u0434\u044c:<\/strong> ${area.toFixed(2)} \u043c\u00b2<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            } else if (category === \"metal\") {\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const weight = parseFloat(document.getElementById(\"weight\").value) || 0;\n                const materialCost = parseFloat(document.getElementById(\"materialCost\").value) || 0;\n                const totalWeight = length * weight;\n                const totalCost = totalWeight * materialCost;\n                resultHTML += `\n                    <strong>\u041e\u0431\u0449\u0438\u0439 \u0432\u0435\u0441:<\/strong> ${totalWeight.toFixed(2)} \u043a\u0433<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            } else if (category === \"subsystem\") {\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const count = parseFloat(document.getElementById(\"count\").value) || 0;\n                const materialCost = parseFloat(document.getElementById(\"materialCost\").value) || 0;\n                const totalLength = length * count;\n                const totalCost = totalLength * materialCost;\n                resultHTML += `\n                    <strong>\u041e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430:<\/strong> ${totalLength.toFixed(2)} \u043c<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            } else if (category === \"piles\") {\n                const count = parseFloat(document.getElementById(\"count\").value) || 0;\n                const length = parseFloat(document.getElementById(\"length\").value) || 0;\n                const materialCost = parseFloat(document.getElementById(\"materialCost\").value) || 0;\n                const totalCost = count * materialCost;\n                resultHTML += `\n                    <strong>\u041a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u0441\u0432\u0430\u0439:<\/strong> ${count}<br>\n                    <strong>\u041e\u0431\u0449\u0430\u044f \u0434\u043b\u0438\u043d\u0430:<\/strong> ${(count * length).toFixed(2)} \u043c<br>\n                    <hr>\n                    <strong>\u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c:<\/strong> ${totalCost.toFixed(2)} \u0440\u0443\u0431.\n                `;\n            }\n\n            resultDiv.style.display = \"block\";\n            resultDiv.innerHTML = resultHTML;\n        }\n\n        \/\/ \u0418\u043d\u0438\u0446\u0438\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u044f \u043f\u043e\u043b\u0435\u0439 \u043f\u0440\u0438 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0435\n        updateFields();\n    <\/script>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\">\n<!DOCTYPE html>\n<html lang=\"ru\">\n<head>\n  <meta charset=\"UTF-8\">\n  <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n  <title>\u041a\u0432\u0438\u0437-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0414\u044d\u043a \u041f\u043b\u044e\u0441<\/title>\n  <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600&#038;display=swap\" rel=\"stylesheet\">\n  <style>\n    .quiz-container {\n      max-width: 600px;\n      margin: 20px auto;\n      background: white;\n      border-radius: 16px;\n      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);\n      padding: 20px;\n      padding-bottom: 50px; \/* \u0414\u043e\u0431\u0430\u0432\u043b\u0435\u043d \u043e\u0442\u0441\u0442\u0443\u043f \u0441\u043d\u0438\u0437\u0443 *\/\n      position: relative;\n      min-height: 360px; \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0430 \u043c\u0438\u043d\u0438\u043c\u0430\u043b\u044c\u043d\u0430\u044f \u0432\u044b\u0441\u043e\u0442\u0430 *\/\n      font-family: 'Inter', sans-serif;\n    }\n    .quiz-container h2 {\n      font-size: 22px;\n      font-weight: 600;\n      color: #1a1a1a;\n      margin-bottom: 16px;\n    }\n    .quiz-container .question {\n      display: none;\n    }\n    .quiz-container .question.active {\n      display: block !important;\n    }\n    .quiz-container .answers button {\n      background: #34c759;\n      color: white;\n      border: none;\n      width: 100%;\n      margin: 8px 0;\n      padding: 14px;\n      font-size: 16px;\n      font-weight: 500;\n      border-radius: 12px;\n      cursor: pointer;\n    }\n    .quiz-container .answers button:hover {\n      background: #2eb850;\n    }\n    .quiz-container .answers input[type=\"number\"], .quiz-container .answers input[type=\"text\"] {\n      width: 100%;\n      padding: 14px;\n      margin-top: 8px;\n      font-size: 16px;\n      border-radius: 12px;\n      border: 1px solid #d1d1d6;\n      background: #f9f9fb;\n      box-sizing: border-box;\n    }\n    .quiz-container .summary {\n      font-size: 18px;\n      font-weight: 600;\n      margin-top: 16px;\n      color: #1a1a1a;\n    }\n    .quiz-container .next-button {\n      margin-top: 16px;\n      padding: 14px;\n      font-size: 16px;\n      font-weight: 500;\n      background: #007aff;\n      color: white;\n      border: none;\n      border-radius: 12px;\n      cursor: pointer;\n      width: 100%;\n    }\n    .quiz-container .next-button:hover {\n      background: #0051c7;\n    }\n    .quiz-container .back-button {\n      padding: 6px 12px;\n      font-size: 14px;\n      background: #d3d3d3;\n      color: #333;\n      border: none;\n      border-radius: 12px;\n      cursor: pointer;\n      position: absolute;\n      bottom: 10px; \/* \u041e\u043f\u0443\u0441\u043a\u0430\u0435\u043c \u043d\u0438\u0436\u0435 *\/\n      left: 20px;\n      display: none;\n    }\n    .quiz-container .back-button.active {\n      display: inline-block !important;\n    }\n    .quiz-container .back-button:hover {\n      background: #c0c0c0;\n    }\n    .quiz-container #fencingInput {\n      display: none;\n    }\n    .quiz-container #fencingInput.active {\n      display: block !important;\n    }\n    .quiz-container .color-chocolate { background: #4A2C2A !important; color: white !important; }\n    .quiz-container .color-wenge { background: #3C2F2F !important; color: white !important; }\n    .quiz-container .color-gray { background: #808080 !important; color: #333 !important; }\n    .quiz-container .color-graphite { background: #36454F !important; color: white !important; }\n    .quiz-container .color-bronze { background: #8C6B3F !important; color: #333 !important; }\n    .quiz-container .color-indicator {\n      width: 20px;\n      height: 20px;\n      border-radius: 50%;\n      display: inline-block;\n      margin-right: 8px;\n      border: 1px solid rgba(0, 0, 0, 0.1);\n    }\n    @media (max-width: 480px) {\n      .quiz-container {\n        margin: 10px;\n        padding: 16px;\n        padding-bottom: 40px; \/* \u041c\u0435\u043d\u044c\u0448\u0438\u0439 \u043e\u0442\u0441\u0442\u0443\u043f \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n        min-height: 300px; \/* \u0423\u0432\u0435\u043b\u0438\u0447\u0435\u043d\u0430 \u0432\u044b\u0441\u043e\u0442\u0430 *\/\n        border-radius: 12px;\n      }\n      .quiz-container h2 {\n        font-size: 18px;\n        margin-bottom: 12px;\n      }\n      .quiz-container .answers button, .quiz-container .next-button {\n        padding: 12px;\n        font-size: 14px;\n        margin: 6px 0;\n      }\n      .quiz-container .answers input[type=\"number\"], .quiz-container .answers input[type=\"text\"] {\n        padding: 12px;\n        font-size: 14px;\n        margin-top: 6px;\n      }\n      .quiz-container .summary {\n        font-size: 16px;\n        margin-top: 12px;\n      }\n      .quiz-container .back-button {\n        bottom: 8px; \/* \u0415\u0449\u0451 \u043d\u0438\u0436\u0435 \u0434\u043b\u044f \u043c\u043e\u0431\u0438\u043b\u044c\u043d\u044b\u0445 *\/\n        left: 16px;\n        padding: 5px 10px;\n        font-size: 12px;\n      }\n      .quiz-container .color-indicator {\n        width: 16px;\n        height: 16px;\n      }\n    }\n  <\/style>\n<\/head>\n<body>\n  <div class=\"quiz-container\">\n    <div class=\"question active\" id=\"q1\">\n      <h2>1. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435<\/h2>\n      <div class=\"answers\">\n        <button data-answer='{\"name\":\"\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\",\"value\":\"\u043d\u0430 \u0431\u0435\u0442\u043e\u043d\u0435\",\"price\":9800}'>\u041d\u0430 \u0431\u0435\u0442\u043e\u043d\u0435<\/button>\n        <button data-answer='{\"name\":\"\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\",\"value\":\"\u043d\u0430 \u043e\u043f\u043e\u0440\u0430\u0445\",\"price\":11500}'>\u041d\u0430 \u043e\u043f\u043e\u0440\u0430\u0445<\/button>\n        <button data-answer='{\"name\":\"\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\",\"value\":\"\u043d\u0430 \u0441\u0432\u0430\u044f\u0445\",\"price\":16000}'>\u041d\u0430 \u0441\u0432\u0430\u044f\u0445<\/button>\n        <button data-answer='{\"name\":\"\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435\",\"value\":\"\u0434\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0439 \u043a\u0430\u0440\u043a\u0430\u0441\",\"price\":9000}'>\u0414\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0439 \u043a\u0430\u0440\u043a\u0430\u0441<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q2\">\n      <h2>2. \u041f\u043b\u043e\u0449\u0430\u0434\u044c \u0442\u0435\u0440\u0440\u0430\u0441\u044b (\u043c\u00b2)<\/h2>\n      <div class=\"answers\">\n        <input type=\"number\" id=\"area\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043f\u043b\u043e\u0449\u0430\u0434\u044c \u0432 \u043c\u00b2\">\n        <button class=\"next-button\" id=\"area-submit\">\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q3\">\n      <h2>3. \u041d\u0443\u0436\u043d\u044b \u043e\u0433\u0440\u0430\u0436\u0434\u0435\u043d\u0438\u044f?<\/h2>\n      <div class=\"answers\">\n        <button data-fencing=\"\u0434\u0430\">\u0414\u0430<\/button>\n        <div id=\"fencingInput\">\n          <input type=\"number\" id=\"fencingLength\" placeholder=\"\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0433\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u043e\u0432\">\n          <button class=\"next-button\" id=\"fencing-submit\">\u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c<\/button>\n        <\/div>\n        <button data-fencing=\"\u043d\u0435\u0442\">\u041d\u0435\u0442<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q4\">\n      <h2>4. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0446\u0432\u0435\u0442 \u0434\u043e\u0441\u043a\u0438<\/h2>\n      <div class=\"answers\">\n        <button class=\"color-chocolate\" data-answer='{\"name\":\"\u0446\u0432\u0435\u0442\",\"value\":\"\u0428\u043e\u043a\u043e\u043b\u0430\u0434\"}'><span class=\"color-indicator\" style=\"background: #4A2C2A;\"><\/span>\u0428\u043e\u043a\u043e\u043b\u0430\u0434<\/button>\n        <button class=\"color-wenge\" data-answer='{\"name\":\"\u0446\u0432\u0435\u0442\",\"value\":\"\u0412\u0435\u043d\u0433\u0435\"}'><span class=\"color-indicator\" style=\"background: #3C2F2F;\"><\/span>\u0412\u0435\u043d\u0433\u0435<\/button>\n        <button class=\"color-gray\" data-answer='{\"name\":\"\u0446\u0432\u0435\u0442\",\"value\":\"\u0421\u0435\u0440\u044b\u0439\"}'><span class=\"color-indicator\" style=\"background: #808080;\"><\/span>\u0421\u0435\u0440\u044b\u0439<\/button>\n        <button class=\"color-graphite\" data-answer='{\"name\":\"\u0446\u0432\u0435\u0442\",\"value\":\"\u0413\u0440\u0430\u0444\u0438\u0442\"}'><span class=\"color-indicator\" style=\"background: #36454F;\"><\/span>\u0413\u0440\u0430\u0444\u0438\u0442<\/button>\n        <button class=\"color-bronze\" data-answer='{\"name\":\"\u0446\u0432\u0435\u0442\",\"value\":\"\u0411\u0440\u043e\u043d\u0437\u0430\"}'><span class=\"color-indicator\" style=\"background: #8C6B3F;\"><\/span>\u0411\u0440\u043e\u043d\u0437\u0430<\/button>\n      <\/div>\n    <\/div>\n\n    <div class=\"question\" id=\"q5\">\n      <h2>5. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c<\/h2>\n      <div class=\"summary\" id=\"result\">\n        \u0422\u0435\u0440\u0440\u0430\u0441\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0434 \u043a\u043b\u044e\u0447: <span id=\"totalPrice\">\u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f&#8230;<\/span>\n      <\/div>\n      <div class=\"answers\">\n        <input type=\"text\" id=\"userName\" placeholder=\"\u0412\u0430\u0448\u0435 \u0438\u043c\u044f\">\n        <input type=\"text\" id=\"userPhone\" placeholder=\"\u0422\u0435\u043b\u0435\u0444\u043e\u043d\">\n        <input type=\"text\" id=\"userAddress\" placeholder=\"\u0410\u0434\u0440\u0435\u0441 \u0434\u043e\u0441\u0442\u0430\u0432\u043a\u0438\">\n        <button class=\"next-button\" id=\"form-submit\">\u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443<\/button>\n      <\/div>\n    <\/div>\n\n    <button class=\"back-button\" id=\"backButton\">\u041d\u0430\u0437\u0430\u0434<\/button>\n  <\/div>\n\n  <script>\n    document.addEventListener('DOMContentLoaded', function() {\n      console.log(\"Quiz script initialized\");\n      const quizContainer = document.querySelector('.quiz-container');\n      if (!quizContainer) {\n        console.error(\"Quiz container not found\");\n        return;\n      }\n\n      let currentQuestionIndex = 0;\n      const answers = {};\n      const questions = quizContainer.querySelectorAll('.question');\n      const backButton = quizContainer.querySelector('#backButton');\n\n      if (!questions.length) {\n        console.error(\"No questions found\");\n        return;\n      }\n\n      function showQuestion(index) {\n        console.log(\"Showing question:\", index);\n        questions.forEach((q, i) => {\n          q.classList.toggle('active', i === index);\n        });\n        if (backButton) {\n          backButton.classList.toggle('active', index > 0);\n        }\n        const fencingInput = quizContainer.querySelector('#fencingInput');\n        if (index === 2 && answers.fencing === '\u0434\u0430' && fencingInput) {\n          fencingInput.classList.add('active');\n        } else if (fencingInput) {\n          fencingInput.classList.remove('active');\n        }\n      }\n\n      function goToNextQuestion() {\n        console.log(\"Moving to next question, current index:\", currentQuestionIndex);\n        currentQuestionIndex++;\n        if (currentQuestionIndex < questions.length) {\n          showQuestion(currentQuestionIndex);\n          if (currentQuestionIndex === 4) calculateTotal();\n        }\n      }\n\n      function goToPreviousQuestion() {\n        console.log(\"Moving to previous question\");\n        if (currentQuestionIndex > 0) {\n          currentQuestionIndex--;\n          showQuestion(currentQuestionIndex);\n        }\n      }\n\n      function calculateTotal() {\n        console.log(\"Calculating total\");\n        const area = parseFloat(answers.area) || 0;\n        const pricePerM2 = parseFloat(answers.price_per_m2) || 0;\n        const fencingLength = parseFloat(answers.fencing_length) || 0;\n        const fencingCost = fencingLength * 10000;\n        const total = area * pricePerM2 + fencingCost;\n        const totalPrice = quizContainer.querySelector('#totalPrice');\n        if (totalPrice) {\n          totalPrice.textContent = total.toLocaleString('ru-RU') + ' \u20bd';\n        }\n        return total;\n      }\n\n      quizContainer.querySelectorAll('#q1 .answers button').forEach(button => {\n        button.addEventListener('click', () => {\n          console.log(\"Base button clicked\");\n          const data = JSON.parse(button.getAttribute('data-answer'));\n          answers[data.name] = data.value;\n          if (data.price) answers.price_per_m2 = data.price;\n          goToNextQuestion();\n        });\n      });\n\n      quizContainer.querySelector('#area-submit')?.addEventListener('click', () => {\n        console.log(\"Area submit clicked\");\n        const areaInput = quizContainer.querySelector('#area');\n        if (!areaInput) {\n          console.error(\"Area input not found\");\n          return;\n        }\n        const area = parseFloat(areaInput.value);\n        if (!area || area <= 0) {\n          alert('\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u0440\u0440\u0435\u043a\u0442\u043d\u0443\u044e \u043f\u043b\u043e\u0449\u0430\u0434\u044c.');\n          return;\n        }\n        answers.area = area;\n        goToNextQuestion();\n      });\n\n      quizContainer.querySelectorAll('#q3 .answers > button').forEach(button => {\n        button.addEventListener('click', () => {\n          console.log(\"Fencing button clicked\");\n          const value = button.getAttribute('data-fencing');\n          answers.fencing = value;\n          const fencingInput = quizContainer.querySelector('#fencingInput');\n          if (value === '\u0434\u0430' && fencingInput) {\n            fencingInput.classList.add('active');\n          } else {\n            goToNextQuestion();\n          }\n        });\n      });\n\n      quizContainer.querySelector('#fencing-submit')?.addEventListener('click', () => {\n        console.log(\"Fencing length submit clicked\");\n        const fencingLengthInput = quizContainer.querySelector('#fencingLength');\n        if (!fencingLengthInput) {\n          console.error(\"Fencing length input not found\");\n          return;\n        }\n        const fencingLength = parseFloat(fencingLengthInput.value);\n        if (!fencingLength || fencingLength <= 0) {\n          alert('\u0412\u0432\u0435\u0434\u0438\u0442\u0435 \u043a\u043e\u043b\u0438\u0447\u0435\u0441\u0442\u0432\u043e \u043f\u043e\u0433\u043e\u043d\u043d\u044b\u0445 \u043c\u0435\u0442\u0440\u043e\u0432.');\n          return;\n        }\n        answers.fencing_length = fencingLength;\n        goToNextQuestion();\n      });\n\n      quizContainer.querySelectorAll('#q4 .answers button').forEach(button => {\n        button.addEventListener('click', () => {\n          console.log(\"Color button clicked\");\n          const data = JSON.parse(button.getAttribute('data-answer'));\n          answers[data.name] = data.value;\n          goToNextQuestion();\n        });\n      });\n\n      quizContainer.querySelector('#form-submit')?.addEventListener('click', () => {\n        console.log(\"Form submit clicked\");\n        const nameInput = quizContainer.querySelector('#userName');\n        const phoneInput = quizContainer.querySelector('#userPhone');\n        const addressInput = quizContainer.querySelector('#userAddress');\n        if (!nameInput || !phoneInput || !addressInput) {\n          console.error(\"Form inputs not found\");\n          alert(\"\u041e\u0448\u0438\u0431\u043a\u0430 \u0444\u043e\u0440\u043c\u044b. \u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u0435 \u0441\u0442\u0440\u0430\u043d\u0438\u0446\u0443.\");\n          return;\n        }\n        const name = nameInput.value;\n        const phone = phoneInput.value;\n        const address = addressInput.value;\n        if (!name || !phone || !address) {\n          alert(\"\u041f\u043e\u0436\u0430\u043b\u0443\u0439\u0441\u0442\u0430, \u0437\u0430\u043f\u043e\u043b\u043d\u0438\u0442\u0435 \u0432\u0441\u0435 \u043f\u043e\u043b\u044f \u0434\u043b\u044f \u0437\u0430\u044f\u0432\u043a\u0438.\");\n          return;\n        }\n\n        const accessToken = \"YOUR_ACCESS_TOKEN\";\n        const subdomain = \"YOUR_SUBDOMAIN\";\n        const pipelineId = \"YOUR_PIPELINE_ID\";\n        const statusId = \"YOUR_STATUS_ID\";\n\n        const data = {\n          leads: [{\n            name: `\u0417\u0430\u044f\u0432\u043a\u0430 \u043e\u0442 ${name}`,\n            price: calculateTotal(),\n            pipeline_id: parseInt(pipelineId),\n            status_id: parseInt(statusId),\n            custom_fields_values: [\n              { field_id: \"YOUR_BASE_TYPE_FIELD_ID\", values: [{ value: answers.\u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 || '' }] },\n              { field_id: \"YOUR_AREA_FIELD_ID\", values: [{ value: answers.area || 0 }] },\n              { field_id: \"YOUR_FENCING_FIELD_ID\", values: [{ value: answers.fencing || '' }] },\n              { field_id: \"YOUR_FENCING_LENGTH_FIELD_ID\", values: [{ value: answers.fencing_length || 0 }] },\n              { field_id: \"YOUR_COLOR_FIELD_ID\", values: [{ value: answers.\u0446\u0432\u0435\u0442 || '' }] }\n            ],\n            _embedded: {\n              contacts: [{\n                name: name,\n                custom_fields_values: [\n                  { field_type: \"phone\", values: [{ value: phone }] },\n                  { field_type: \"text\", field_name: \"\u0410\u0434\u0440\u0435\u0441\", values: [{ value: address }] }\n                ]\n              }]\n            }\n          }]\n        };\n\n        fetch(`https:\/\/${subdomain}.amocrm.ru\/api\/v4\/leads\/complex`, {\n          method: 'POST',\n          headers: {\n            'Authorization': `Bearer ${accessToken}`,\n            'Content-Type': 'application\/json'\n          },\n          body: JSON.stringify(data)\n        })\n        .then(response => {\n          if (!response.ok) throw new Error('API error: ' + response.status);\n          return response.json();\n        })\n        .then(data => {\n          console.log(\"\u0417\u0430\u044f\u0432\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430:\", data);\n          alert(\"\u0421\u043f\u0430\u0441\u0438\u0431\u043e! \u0412\u0430\u0448\u0430 \u0437\u0430\u044f\u0432\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043b\u0435\u043d\u0430 \u0432 amoCRM.\");\n        })\n        .catch(error => {\n          console.error('\u041e\u0448\u0438\u0431\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438:', error);\n          alert(\"\u041e\u0448\u0438\u0431\u043a\u0430 \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u044f\u0432\u043a\u0438. \u041f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043f\u043e\u0437\u0436\u0435.\");\n        });\n      });\n\n      backButton?.addEventListener('click', () => {\n        console.log(\"Back button clicked\");\n        goToPreviousQuestion();\n      });\n\n      console.log(\"Quiz initialized, showing question 0\");\n      showQuestion(0);\n    });\n  <\/script>\n<\/body>\n<\/html>\n<\/div>\n\n\n\n<div class=\"wp-block-group is-nowrap is-layout-flex wp-container-core-group-is-layout-3a88641f wp-block-group-is-layout-flex\"><\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u041a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0441\u043c\u0435\u0442\u044b \u041a\u0430\u0442\u0435\u0433\u043e\u0440\u0438\u044f: \u0422\u0435\u0440\u0440\u0430\u0441\u044b\u0417\u0430\u0431\u043e\u0440\u044b\u0424\u0430\u0441\u0430\u0434\u044b\u041c\u0435\u0442\u0430\u043b\u043b\u043e\u043a\u043e\u043d\u0441\u0442\u0440\u0443\u043a\u0446\u0438\u0438\u041f\u043e\u0434\u0441\u0438\u0441\u0442\u0435\u043c\u044b\u0421\u0432\u0430\u0439\u043d\u044b\u0435 \u043f\u043e\u043b\u044f \u0420\u0430\u0441\u0441\u0447\u0438\u0442\u0430\u0442\u044c \u041a\u0432\u0438\u0437-\u043a\u0430\u043b\u044c\u043a\u0443\u043b\u044f\u0442\u043e\u0440 \u0414\u044d\u043a \u041f\u043b\u044e\u0441 1. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u043e\u0441\u043d\u043e\u0432\u0430\u043d\u0438\u0435 \u041d\u0430 \u0431\u0435\u0442\u043e\u043d\u0435 \u041d\u0430 \u043e\u043f\u043e\u0440\u0430\u0445 \u041d\u0430 \u0441\u0432\u0430\u044f\u0445 \u0414\u0435\u0440\u0435\u0432\u044f\u043d\u043d\u044b\u0439 \u043a\u0430\u0440\u043a\u0430\u0441 2. \u041f\u043b\u043e\u0449\u0430\u0434\u044c \u0442\u0435\u0440\u0440\u0430\u0441\u044b (\u043c\u00b2) \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c 3. \u041d\u0443\u0436\u043d\u044b \u043e\u0433\u0440\u0430\u0436\u0434\u0435\u043d\u0438\u044f? \u0414\u0430 \u041f\u043e\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u044c \u041d\u0435\u0442 4. \u0412\u044b\u0431\u0435\u0440\u0438\u0442\u0435 \u0446\u0432\u0435\u0442 \u0434\u043e\u0441\u043a\u0438 \u0428\u043e\u043a\u043e\u043b\u0430\u0434 \u0412\u0435\u043d\u0433\u0435 \u0421\u0435\u0440\u044b\u0439 \u0413\u0440\u0430\u0444\u0438\u0442 \u0411\u0440\u043e\u043d\u0437\u0430 5. \u0418\u0442\u043e\u0433\u043e\u0432\u0430\u044f \u0441\u0442\u043e\u0438\u043c\u043e\u0441\u0442\u044c \u0422\u0435\u0440\u0440\u0430\u0441\u043d\u0430\u044f \u0441\u0438\u0441\u0442\u0435\u043c\u0430 \u043f\u043e\u0434 \u043a\u043b\u044e\u0447: \u0440\u0430\u0441\u0441\u0447\u0438\u0442\u044b\u0432\u0430\u0435\u0442\u0441\u044f&#8230; \u041e\u0442\u043f\u0440\u0430\u0432\u0438\u0442\u044c \u0437\u0430\u044f\u0432\u043a\u0443 \u041d\u0430\u0437\u0430\u0434<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"elementor_canvas","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-32","post","type-post","status-publish","format-standard","hentry","category-1"],"_links":{"self":[{"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/posts\/32","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/22-22.su\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=32"}],"version-history":[{"count":17,"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/posts\/32\/revisions"}],"predecessor-version":[{"id":117,"href":"https:\/\/22-22.su\/index.php?rest_route=\/wp\/v2\/posts\/32\/revisions\/117"}],"wp:attachment":[{"href":"https:\/\/22-22.su\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=32"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/22-22.su\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=32"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/22-22.su\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=32"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}