{"id":1966,"date":"2025-10-22T01:35:34","date_gmt":"2025-10-21T22:05:34","guid":{"rendered":"https:\/\/arabel.ir\/?page_id=1966"},"modified":"2025-11-06T10:31:16","modified_gmt":"2025-11-06T07:01:16","slug":"elementor-1966","status":"publish","type":"page","link":"https:\/\/arabel.ir\/?page_id=1966","title":{"rendered":"\u0645\u062d\u0627\u0633\u0628\u0647 \u0627\u0633\u062a\u062e\u0631"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"1966\" class=\"elementor elementor-1966\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-dac61a6 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"dac61a6\" data-element_type=\"section\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-b6ec003\" data-id=\"b6ec003\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-6f36282 elementor-widget__width-inherit elementor-widget elementor-widget-shortcode\" data-id=\"6f36282\" data-element_type=\"widget\" data-widget_type=\"shortcode.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-shortcode\">    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n\n    <style>\n        @keyframes fadeIn {\n            from { opacity: 0; transform: translateY(10px); }\n            to { opacity: 1; transform: translateY(0); }\n        }\n        .animate-fadeIn { animation: fadeIn 0.3s ease-in-out; }\n        input[type=\"number\"]::-webkit-inner-spin-button,\n        input[type=\"number\"]::-webkit-outer-spin-button {\n            -webkit-appearance: none;\n            margin: 0;\n        }\n        input[type=\"number\"] {\n            -moz-appearance: textfield;\n        }\n    <\/style>\n\n    <div id=\"pool-calculator-root\"><\/div>\n\n    <script crossorigin src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\"><\/script>\n    <script crossorigin src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\"><\/script>\n    <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\n\n    <script type=\"text\/babel\">\n        const { useState, useEffect } = React;\n\n        \/\/ \u0622\u06cc\u06a9\u0648\u0646\u200c\u0647\u0627\u06cc \u062c\u062f\u06cc\u062f \u0648 \u062d\u0631\u0641\u0647\u200c\u0627\u06cc\n        const Triangle = () => (\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <path d=\"M12 2L2 22h20L12 2z\"\/>\n            <\/svg>\n        );\n\n        const Square = () => (\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"2\"\/>\n            <\/svg>\n        );\n\n        const Circle = () => (\n            <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n            <\/svg>\n        );\n\n        \/\/ \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a InputField \u0628\u0627 key \u0648 \u0645\u062d\u062f\u0648\u062f\u06cc\u062a\n        const InputField = ({ label, value, onChange, min = \"0\", step = \"0.1\", required = true, description, max, inputKey }) => {\n            const [internalValue, setInternalValue] = useState(value || '');\n\n            useEffect(() => {\n                setInternalValue(value || '');\n            }, [value]);\n\n            const handleChange = (e) => {\n                const val = e.target.value;\n                const num = parseFloat(val);\n\n                if (val === '' || (!isNaN(num) && (!min || num >= parseFloat(min)) && (!max || num <= parseFloat(max)))) {\n                    setInternalValue(val);\n                    onChange(val);\n                }\n            };\n\n            return (\n                <div className=\"flex flex-col gap-2\">\n                    <label className=\"font-semibold text-gray-700 text-sm\">\n                        {label}\n                        {required && <span className=\"text-red-500 mr-1\">*<\/span>}\n                    <\/label>\n                    <input\n                        type=\"number\"\n                        value={internalValue}\n                        onChange={handleChange}\n                        min={min}\n                        max={max}\n                        step={step}\n                        className=\"px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 outline-none transition-all text-right\"\n                        placeholder=\"\u0645\u0642\u062f\u0627\u0631 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f\"\n                        style={{ direction: 'ltr', textAlign: 'right' }}\n                        key={inputKey}\n                    \/>\n                    {description && (\n                        <span className=\"text-xs text-gray-500 italic\">{description}<\/span>\n                    )}\n                <\/div>\n            );\n        };\n\n        \/\/ \u06a9\u0627\u0645\u067e\u0648\u0646\u0646\u062a SelectField \u0628\u0631\u0627\u06cc \u0636\u0631\u06cc\u0628 \u0634\u06cc\u0628\n        const SelectField = ({ label, value, onChange, options, required = true, description, inputKey }) => {\n            return (\n                <div className=\"flex flex-col gap-2\">\n                    <label className=\"font-semibold text-gray-700 text-sm\">\n                        {label}\n                        {required && <span className=\"text-red-500 mr-1\">*<\/span>}\n                    <\/label>\n                    <select\n                        value={value}\n                        onChange={(e) => onChange(e.target.value)}\n                        className=\"px-4 py-3 border-2 border-gray-300 rounded-lg focus:border-green-500 focus:ring-2 focus:ring-green-200 outline-none transition-all text-right\"\n                        style={{ direction: 'rtl' }}\n                        key={inputKey}\n                    >\n                        <option value=\"\" disabled>\u0627\u0646\u062a\u062e\u0627\u0628 \u06a9\u0646\u06cc\u062f<\/option>\n                        {options.map(opt => (\n                            <option key={opt.value} value={opt.value}>\n                                {opt.label}\n                            <\/option>\n                        ))}\n                    <\/select>\n                    {description && (\n                        <span className=\"text-xs text-gray-500 italic\">{description}<\/span>\n                    )}\n                <\/div>\n            );\n        };\n\n        const ResultField = ({ label, value, unit = \"\u0645\u062a\u0631 \u0645\u0631\u0628\u0639\", description }) => (\n            <div className=\"flex flex-col gap-2 bg-gray-50 p-4 rounded-lg border border-gray-200\">\n                <label className=\"font-semibold text-gray-700 text-sm\">{label}<\/label>\n                <div className=\"text-2xl font-bold text-green-600 text-right\">\n                    {value || '---'} {value && unit}\n                <\/div>\n                {description && (\n                    <span className=\"text-xs text-gray-500 italic\">{description}<\/span>\n                )}\n            <\/div>\n        );\n\n        function PoolCalculator() {\n            const [activeTab, setActiveTab] = useState('slope');\n            const [slopeMethod, setSlopeMethod] = useState('dimensions');\n\n            const [slopeDimensionsInputs, setSlopeDimensionsInputs] = useState({\n                topLength: '', topWidth: '', bottomLength: '', bottomWidth: '', height: '', trenchMargin: ''\n            });\n\n            const [slopeSlopeInputs, setSlopeSlopeInputs] = useState({\n                topLength: '', topWidth: '', slopeLength: '', slopeCoeff: '', trenchMargin: ''\n            });\n\n            const [verticalInputs, setVerticalInputs] = useState({\n                length: '', width: '', height: '', trenchMargin: ''\n            });\n\n            const [cylindricalInputs, setCylindricalInputs] = useState({\n                diameter: '', height: '', trenchMargin: ''\n            });\n\n            \/\/ \u0645\u062d\u0627\u0633\u0628\u0627\u062a\n            const calculateSlopeDimensions = () => {\n                const { topLength, topWidth, bottomLength, bottomWidth, height, trenchMargin } = slopeDimensionsInputs;\n                if (!topLength || !topWidth || !bottomLength || !bottomWidth || !height || !trenchMargin) return null;\n\n                const TL = parseFloat(topLength);\n                const TW = parseFloat(topWidth);\n                const BL = parseFloat(bottomLength);\n                const BW = parseFloat(bottomWidth);\n                const H = parseFloat(height);\n                const TM = parseFloat(trenchMargin);\n\n                const slopeLength = Math.sqrt(Math.pow((TL - BL) \/ 2, 2) + Math.pow(H, 2));\n                const slopeWidth = Math.sqrt(Math.pow((TW - BW) \/ 2, 2) + Math.pow(H, 2));\n                const wallAreaLength = 2 * (slopeLength + TM) * ((TL + BL) \/ 2);\n                const wallAreaWidth = 2 * (slopeWidth + TM) * ((TW + BW) \/ 2);\n                const floorArea = BL * BW;\n                const totalArea = wallAreaLength + wallAreaWidth + floorArea;\n                const topArea = TL * TW;\n                const bottomArea = BL * BW;\n                const volume = ((topArea + bottomArea) \/ 2) * H;\n\n                return {\n                    area: totalArea.toFixed(2),\n                    volume: volume.toFixed(2)\n                };\n            };\n\n            const calculateSlopeWithSlope = () => {\n                const { topLength, topWidth, slopeLength, slopeCoeff, trenchMargin } = slopeSlopeInputs;\n                if (!topLength || !topWidth || !slopeLength || !slopeCoeff || !trenchMargin) return null;\n\n                const TL = parseFloat(topLength);\n                const TW = parseFloat(topWidth);\n                const SL = parseFloat(slopeLength);\n                const SC = parseFloat(slopeCoeff);\n                const TM = parseFloat(trenchMargin);\n\n                const H = SL * SC;\n                const horizontalSlope = Math.sqrt(Math.pow(SL, 2) - Math.pow(H, 2));\n                const BL = TL - (2 * horizontalSlope);\n                const BW = TW - (2 * horizontalSlope);\n                const wallAreaLength = 2 * (SL + TM) * ((TL + BL) \/ 2);\n                const wallAreaWidth = 2 * (SL + TM) * ((TW + BW) \/ 2);\n                const floorArea = BL * BW;\n                const totalArea = wallAreaLength + wallAreaWidth + floorArea;\n                const topArea = TL * TW;\n                const bottomArea = BL * BW;\n                const volume = ((topArea + bottomArea) \/ 2) * H;\n\n                return {\n                    area: totalArea.toFixed(2),\n                    volume: volume.toFixed(2),\n                    height: H.toFixed(2)\n                };\n            };\n\n            const calculateVertical = () => {\n                const { length, width, height, trenchMargin } = verticalInputs;\n                if (!length || !width || !height || !trenchMargin) return null;\n\n                const L = parseFloat(length);\n                const W = parseFloat(width);\n                const H = parseFloat(height);\n                const TM = parseFloat(trenchMargin);\n\n                const perimeter = 2 * (L + W);\n                const wallHeight = H + TM;\n                const wallArea = perimeter * wallHeight;\n                const floorArea = L * W;\n                const totalArea = wallArea + floorArea;\n                const volume = L * W * H;\n\n                return {\n                    area: totalArea.toFixed(2),\n                    volume: volume.toFixed(2)\n                };\n            };\n\n            const calculateCylindrical = () => {\n                const { diameter, height, trenchMargin } = cylindricalInputs;\n                if (!diameter || !height || !trenchMargin) return null;\n\n                const D = parseFloat(diameter);\n                const H = parseFloat(height);\n                const TM = parseFloat(trenchMargin);\n\n                const perimeter = D * 3.14159;\n                const wallHeight = H + TM;\n                const wallArea = perimeter * wallHeight;\n                const radius = D \/ 2;\n                const floorArea = 3.14159 * radius * radius;\n                const totalArea = wallArea + floorArea;\n                const volume = floorArea * H;\n\n                return {\n                    area: totalArea.toFixed(2),\n                    volume: volume.toFixed(2)\n                };\n            };\n\n            const slopeResults = slopeMethod === 'dimensions' ? calculateSlopeDimensions() : calculateSlopeWithSlope();\n            const verticalResults = calculateVertical();\n            const cylindricalResults = calculateCylindrical();\n\n            const TabButton = ({ id, label, icon: Icon }) => (\n                <button\n                    onClick={() => setActiveTab(id)}\n                    className={`flex-1 py-4 px-6 font-semibold text-sm md:text-base transition-all duration-300 border-b-4 ${\n                        activeTab === id\n                            ? 'bg-gradient-to-br from-green-50 to-emerald-50 border-green-500 text-green-700'\n                            : 'bg-gray-50 border-gray-300 text-gray-600 hover:bg-gray-100'\n                    }`}\n                >\n                    <div className=\"flex items-center justify-center gap-2\">\n                        <Icon \/>\n                        <span>{label}<\/span>\n                    <\/div>\n                <\/button>\n            );\n\n            return (\n                <div className=\"bg-gradient-to-br from-green-50 via-emerald-50 to-teal-50 py-8 px-4\" dir=\"rtl\">\n                    <div className=\"max-w-5xl mx-auto\">\n                        <div className=\"bg-white rounded-2xl shadow-xl p-6 md:p-8 mb-6\">\n                            <div className=\"flex items-center gap-4 mb-4\">\n                                <div className=\"bg-gradient-to-br from-green-500 to-emerald-600 p-4 rounded-xl shadow-lg\">\n                                    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n                                        <rect x=\"4\" y=\"2\" width=\"16\" height=\"20\" rx=\"2\"\/>\n                                        <line x1=\"8\" y1=\"6\" x2=\"16\" y2=\"6\"\/>\n                                        <line x1=\"16\" y1=\"14\" x2=\"16\" y2=\"18\"\/>\n                                        <line x1=\"8\" y1=\"14\" x2=\"8\" y2=\"18\"\/>\n                                        <line x1=\"12\" y1=\"14\" x2=\"12\" y2=\"18\"\/>\n                                    <\/svg>\n                                <\/div>\n                                <div>\n                                    <h1 className=\"text-2xl md:text-3xl font-bold text-gray-800\">\n                                        \u0645\u062d\u0627\u0633\u0628\u0647\u200c\u06af\u0631 \u0627\u0633\u062a\u062e\u0631 \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc \u0698\u0626\u0648\u0645\u0645\u0628\u0631\u0627\u0646\n                                    <\/h1>\n                                    <p className=\"text-sm md:text-base text-gray-600 mt-1\">\n                                        \u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0642\u062f\u0627\u0631 \u0648\u0631\u0642 \u0648 \u062d\u062c\u0645 \u0622\u0628 \u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631\u0647\u0627\u06cc \u06a9\u0634\u0627\u0648\u0631\u0632\u06cc\n                                    <\/p>\n                                <\/div>\n                            <\/div>\n                        <\/div>\n\n                        <div className=\"bg-white rounded-t-2xl shadow-lg overflow-hidden\">\n                            <div className=\"flex flex-col md:flex-row\">\n                                <TabButton id=\"slope\" label=\"\u062f\u06cc\u0648\u0627\u0631\u0647 \u0634\u06cc\u0628\u200c\u062f\u0627\u0631\" icon={Triangle} \/>\n                                <TabButton id=\"vertical\" label=\"\u062f\u06cc\u0648\u0627\u0631\u0647 \u0639\u0645\u0648\u062f\u06cc\" icon={Square} \/>\n                                <TabButton id=\"cylindrical\" label=\"\u0627\u0633\u062a\u0648\u0627\u0646\u0647\u200c\u0627\u06cc\" icon={Circle} \/>\n                            <\/div>\n                        <\/div>\n\n                        <div className=\"bg-white rounded-b-2xl shadow-xl p-4 md:p-8\">\n                            {activeTab === 'slope' && (\n                                <div className=\"space-y-6 md:space-y-8 animate-fadeIn\">\n                                    <div>\n                                        <h2 className=\"text-xl md:text-2xl font-bold text-gray-800 mb-2\">\u0627\u0633\u062a\u062e\u0631 \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631\u0647 \u0634\u06cc\u0628\u200c\u062f\u0627\u0631<\/h2>\n                                        <p className=\"text-sm md:text-base text-gray-600\">\u0627\u0646\u062a\u062e\u0627\u0628 \u0631\u0648\u0634 \u0645\u062d\u0627\u0633\u0628\u0647<\/p>\n                                    <\/div>\n\n                                    <div className=\"flex flex-col md:flex-row gap-4\">\n                                        <button onClick={() => setSlopeMethod('dimensions')} className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 border-2 ${slopeMethod === 'dimensions' ? 'bg-green-500 text-white border-green-500 shadow-lg' : 'bg-white text-gray-700 border-gray-300 hover:border-green-300'}`}>\n                                            \u0645\u062d\u0627\u0633\u0628\u0647 \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0628\u0627\u0644\u0627 \u0648 \u06a9\u0641 \u0627\u0633\u062a\u062e\u0631\n                                        <\/button>\n                                        <button onClick={() => setSlopeMethod('slope')} className={`flex-1 py-4 px-6 rounded-xl font-semibold transition-all duration-300 border-2 ${slopeMethod === 'slope' ? 'bg-green-500 text-white border-green-500 shadow-lg' : 'bg-white text-gray-700 border-gray-300 hover:border-green-300'}`}>\n                                            \u0645\u062d\u0627\u0633\u0628\u0647 \u0628\u0627 \u0627\u0628\u0639\u0627\u062f \u0628\u0627\u0644\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 \u0648 \u0634\u06cc\u0628\n                                        <\/button>\n                                    <\/div>\n\n                                    {slopeMethod === 'dimensions' && (\n                                        <fieldset className=\"border-2 border-gray-200 rounded-xl p-4 md:p-6\">\n                                            <legend className=\"text-base md:text-lg font-bold text-gray-700 px-3 bg-white\">\u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc<\/legend>\n                                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                                <InputField label=\"\u0637\u0648\u0644 \u0628\u0627\u0644\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeDimensionsInputs.topLength} onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, topLength: val})} description=\"\u0637\u0648\u0644 \u062f\u0647\u0627\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"dim-topLength\" \/>\n                                                <InputField label=\"\u0639\u0631\u0636 \u0628\u0627\u0644\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeDimensionsInputs.topWidth} onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, topWidth: val})} description=\"\u0639\u0631\u0636 \u062f\u0647\u0627\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"dim-topWidth\" \/>\n                                                <InputField label=\"\u0637\u0648\u0644 \u06a9\u0641 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeDimensionsInputs.bottomLength} onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, bottomLength: val})} description=\"\u0637\u0648\u0644 \u06a9\u0641 \u06cc\u0627 \u062a\u0647 \u0627\u0633\u062a\u062e\u0631\" inputKey=\"dim-bottomLength\" \/>\n                                                <InputField label=\"\u0639\u0631\u0636 \u06a9\u0641 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeDimensionsInputs.bottomWidth} onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, bottomWidth: val})} description=\"\u0639\u0631\u0636 \u06a9\u0641 \u06cc\u0627 \u062a\u0647 \u0627\u0633\u062a\u062e\u0631\" inputKey=\"dim-bottomWidth\" \/>\n                                                <InputField label=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0634\u06cc\u0628 (\u0645\u062a\u0631)\" value={slopeDimensionsInputs.height} onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, height: val})} description=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0645\u0648\u062f\u06cc \u062f\u06cc\u0648\u0627\u0631\u0647 \u0634\u06cc\u0628\u200c\u062f\u0627\u0631\" inputKey=\"dim-height\" \/>\n                                                <InputField\n                                                    label=\"\u0645\u0642\u062f\u0627\u0631 \u062a\u0631\u0627\u0646\u0634\u0647 (\u0645\u062a\u0631)\"\n                                                    value={slopeDimensionsInputs.trenchMargin}\n                                                    onChange={(val) => setSlopeDimensionsInputs({...slopeDimensionsInputs, trenchMargin: val})}\n                                                    min=\"1\" max=\"2.5\" step=\"0.1\"\n                                                    description=\"\u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2.\u06f5 \u0645\u062a\u0631\"\n                                                    inputKey=\"dim-trench\"\n                                                \/>\n                                            <\/div>\n                                        <\/fieldset>\n                                    )}\n\n                                    {slopeMethod === 'slope' && (\n                                        <fieldset className=\"border-2 border-gray-200 rounded-xl p-4 md:p-6\">\n                                            <legend className=\"text-base md:text-lg font-bold text-gray-700 px-3 bg-white\">\u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc<\/legend>\n                                            <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                                <InputField label=\"\u0637\u0648\u0644 \u0628\u0627\u0644\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeSlopeInputs.topLength} onChange={(val) => setSlopeSlopeInputs({...slopeSlopeInputs, topLength: val})} description=\"\u0637\u0648\u0644 \u062f\u0647\u0627\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"slope-topLength\" \/>\n                                                <InputField label=\"\u0639\u0631\u0636 \u0628\u0627\u0644\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeSlopeInputs.topWidth} onChange={(val) => setSlopeSlopeInputs({...slopeSlopeInputs, topWidth: val})} description=\"\u0639\u0631\u0636 \u062f\u0647\u0627\u0646\u0647 \u0628\u0627\u0644\u0627\u06cc\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"slope-topWidth\" \/>\n                                                <InputField label=\"\u0637\u0648\u0644 \u0634\u06cc\u0628 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={slopeSlopeInputs.slopeLength} onChange={(val) => setSlopeSlopeInputs({...slopeSlopeInputs, slopeLength: val})} description=\"\u0637\u0648\u0644 \u062f\u06cc\u0648\u0627\u0631\u0647 \u0634\u06cc\u0628\u200c\u062f\u0627\u0631\" inputKey=\"slope-length\" \/>\n                                                \n                                                <SelectField\n                                                    label=\"\u0632\u0627\u0648\u06cc\u0647 \u0634\u06cc\u0628 \u062f\u06cc\u0648\u0627\u0631\u0647\"\n                                                    value={slopeSlopeInputs.slopeCoeff}\n                                                    onChange={(val) => setSlopeSlopeInputs({...slopeSlopeInputs, slopeCoeff: val})}\n                                                    options={[\n                                                        { value: '1', label: '45 \u062f\u0631\u062c\u0647 (\u0636\u0631\u06cc\u0628 1)' },\n                                                        { value: '0.5', label: '60 \u062f\u0631\u062c\u0647 (\u0636\u0631\u06cc\u0628 0.5)' }\n                                                    ]}\n                                                    description=\"\u0627\u0646\u062a\u062e\u0627\u0628 \u0632\u0627\u0648\u06cc\u0647 \u0634\u06cc\u0628\"\n                                                    inputKey=\"slope-coeff-select\"\n                                                \/>\n\n                                                <InputField\n                                                    label=\"\u0645\u0642\u062f\u0627\u0631 \u062a\u0631\u0627\u0646\u0634\u0647 (\u0645\u062a\u0631)\"\n                                                    value={slopeSlopeInputs.trenchMargin}\n                                                    onChange={(val) => setSlopeSlopeInputs({...slopeSlopeInputs, trenchMargin: val})}\n                                                    min=\"1\" max=\"2.5\" step=\"0.1\"\n                                                    description=\"\u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2.\u06f5 \u0645\u062a\u0631\"\n                                                    inputKey=\"slope-trench\"\n                                                \/>\n                                            <\/div>\n                                        <\/fieldset>\n                                    )}\n\n                                    <fieldset className=\"border-2 border-green-200 rounded-xl p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50\">\n                                        <legend className=\"text-base md:text-lg font-bold text-green-700 px-3 bg-white\">\u0646\u062a\u06cc\u062c\u0647 \u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/legend>\n                                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                            <ResultField label=\"\u0645\u0633\u0627\u062d\u062a \u0648\u0631\u0642\" value={slopeResults?.area} unit=\"\u0645\u062a\u0631 \u0645\u0631\u0628\u0639\" description=\"\u0645\u0633\u0627\u062d\u062a \u06a9\u0644 \u0648\u0631\u0642 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632\" \/>\n                                            <ResultField label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" value={slopeResults?.volume} unit=\"\u0645\u062a\u0631 \u0645\u06a9\u0639\u0628\" description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0627\u0633\u062a\u062e\u0631\" \/>\n                                            <ResultField \n                                                label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" \n                                                value={slopeResults?.volume ? (parseFloat(slopeResults.volume) * 1000).toFixed(0) : ''} \n                                                unit=\"\u0644\u06cc\u062a\u0631\" \n                                                description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0622\u0628 \u0628\u0647 \u0644\u06cc\u062a\u0631\" \n                                            \/>\n                                            {slopeMethod === 'slope' && slopeResults?.height && (\n                                                <ResultField label=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0645\u062d\u0627\u0633\u0628\u0647 \u0634\u062f\u0647\" value={slopeResults?.height} unit=\"\u0645\u062a\u0631\" description=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0645\u0648\u062f\u06cc \u0627\u0633\u062a\u062e\u0631\" \/>\n                                            )}\n                                        <\/div>\n                                    <\/fieldset>\n                                <\/div>\n                            )}\n\n                            {activeTab === 'vertical' && (\n                                <div className=\"space-y-6 md:space-y-8 animate-fadeIn\">\n                                    <div>\n                                        <h2 className=\"text-xl md:text-2xl font-bold text-gray-800 mb-2\">\u0627\u0633\u062a\u062e\u0631 \u0628\u0627 \u062f\u06cc\u0648\u0627\u0631\u0647 \u0639\u0645\u0648\u062f\u06cc<\/h2>\n                                        <p className=\"text-sm md:text-base text-gray-600\">\u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0633\u0627\u062d\u062a \u0648\u0631\u0642 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0648 \u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631<\/p>\n                                    <\/div>\n\n                                    <fieldset className=\"border-2 border-gray-200 rounded-xl p-4 md:p-6\">\n                                        <legend className=\"text-base md:text-lg font-bold text-gray-700 px-3 bg-white\">\u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc<\/legend>\n                                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                            <InputField label=\"\u0637\u0648\u0644 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={verticalInputs.length} onChange={(val) => setVerticalInputs({...verticalInputs, length: val})} inputKey=\"vert-length\" \/>\n                                            <InputField label=\"\u0639\u0631\u0636 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={verticalInputs.width} onChange={(val) => setVerticalInputs({...verticalInputs, width: val})} inputKey=\"vert-width\" \/>\n                                            <InputField label=\"\u0627\u0631\u062a\u0641\u0627\u0639 (\u0645\u062a\u0631)\" value={verticalInputs.height} onChange={(val) => setVerticalInputs({...verticalInputs, height: val})} description=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0645\u0648\u062f\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"vert-height\" \/>\n                                            <InputField\n                                                label=\"\u0645\u0642\u062f\u0627\u0631 \u062a\u0631\u0627\u0646\u0634\u0647 (\u0645\u062a\u0631)\"\n                                                value={verticalInputs.trenchMargin}\n                                                onChange={(val) => setVerticalInputs({...verticalInputs, trenchMargin: val})}\n                                                min=\"1\" max=\"2.5\" step=\"0.1\"\n                                                description=\"\u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2.\u06f5 \u0645\u062a\u0631\"\n                                                inputKey=\"vert-trench\"\n                                            \/>\n                                        <\/div>\n                                    <\/fieldset>\n\n                                    <fieldset className=\"border-2 border-green-200 rounded-xl p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50\">\n                                        <legend className=\"text-base md:text-lg font-bold text-green-700 px-3 bg-white\">\u0646\u062a\u06cc\u062c\u0647 \u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/legend>\n                                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                            <ResultField label=\"\u0645\u0633\u0627\u062d\u062a \u0648\u0631\u0642\" value={verticalResults?.area} unit=\"\u0645\u062a\u0631 \u0645\u0631\u0628\u0639\" description=\"\u0645\u0633\u0627\u062d\u062a \u06a9\u0644 \u0648\u0631\u0642\" \/>\n                                            <ResultField label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" value={verticalResults?.volume} unit=\"\u0645\u062a\u0631 \u0645\u06a9\u0639\u0628\" description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0627\u0633\u062a\u062e\u0631\" \/>\n                                            <ResultField \n                                                label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" \n                                                value={verticalResults?.volume ? (parseFloat(verticalResults.volume) * 1000).toFixed(0) : ''} \n                                                unit=\"\u0644\u06cc\u062a\u0631\" \n                                                description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0622\u0628 \u0628\u0647 \u0644\u06cc\u062a\u0631\" \n                                            \/>\n                                        <\/div>\n                                    <\/fieldset>\n                                <\/div>\n                            )}\n\n                            {activeTab === 'cylindrical' && (\n                                <div className=\"space-y-6 md:space-y-8 animate-fadeIn\">\n                                    <div>\n                                        <h2 className=\"text-xl md:text-2xl font-bold text-gray-800 mb-2\">\u0627\u0633\u062a\u062e\u0631 \u0627\u0633\u062a\u0648\u0627\u0646\u0647\u200c\u0627\u06cc<\/h2>\n                                        <p className=\"text-sm md:text-base text-gray-600\">\u0645\u062d\u0627\u0633\u0628\u0647 \u0645\u0633\u0627\u062d\u062a \u0648\u0631\u0642 \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0648 \u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631<\/p>\n                                    <\/div>\n\n                                    <fieldset className=\"border-2 border-gray-200 rounded-xl p-4 md:p-6\">\n                                        <legend className=\"text-base md:text-lg font-bold text-gray-700 px-3 bg-white\">\u0645\u0642\u0627\u062f\u06cc\u0631 \u0648\u0631\u0648\u062f\u06cc<\/legend>\n                                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                            <InputField label=\"\u0642\u0637\u0631 \u0627\u0633\u062a\u062e\u0631 (\u0645\u062a\u0631)\" value={cylindricalInputs.diameter} onChange={(val) => setCylindricalInputs({...cylindricalInputs, diameter: val})} inputKey=\"cyl-diameter\" \/>\n                                            <InputField label=\"\u0627\u0631\u062a\u0641\u0627\u0639 (\u0645\u062a\u0631)\" value={cylindricalInputs.height} onChange={(val) => setCylindricalInputs({...cylindricalInputs, height: val})} description=\"\u0627\u0631\u062a\u0641\u0627\u0639 \u0639\u0645\u0648\u062f\u06cc \u0627\u0633\u062a\u062e\u0631\" inputKey=\"cyl-height\" \/>\n                                            <InputField\n                                                label=\"\u0645\u0642\u062f\u0627\u0631 \u062a\u0631\u0627\u0646\u0634\u0647 (\u0645\u062a\u0631)\"\n                                                value={cylindricalInputs.trenchMargin}\n                                                onChange={(val) => setCylindricalInputs({...cylindricalInputs, trenchMargin: val})}\n                                                min=\"1\" max=\"2.5\" step=\"0.1\"\n                                                description=\"\u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2.\u06f5 \u0645\u062a\u0631\"\n                                                inputKey=\"cyl-trench\"\n                                            \/>\n                                        <\/div>\n                                    <\/fieldset>\n\n                                    <fieldset className=\"border-2 border-green-200 rounded-xl p-4 md:p-6 bg-gradient-to-br from-green-50 to-emerald-50\">\n                                        <legend className=\"text-base md:text-lg font-bold text-green-700 px-3 bg-white\">\u0646\u062a\u06cc\u062c\u0647 \u0645\u062d\u0627\u0633\u0628\u0627\u062a<\/legend>\n                                        <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 mt-4\">\n                                            <ResultField label=\"\u0645\u0633\u0627\u062d\u062a \u0648\u0631\u0642\" value={cylindricalResults?.area} unit=\"\u0645\u062a\u0631 \u0645\u0631\u0628\u0639\" description=\"\u0645\u0633\u0627\u062d\u062a \u06a9\u0644 \u0648\u0631\u0642\" \/>\n                                            <ResultField label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" value={cylindricalResults?.volume} unit=\"\u0645\u062a\u0631 \u0645\u06a9\u0639\u0628\" description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0627\u0633\u062a\u062e\u0631\" \/>\n                                            <ResultField \n                                                label=\"\u062d\u062c\u0645 \u0627\u0633\u062a\u062e\u0631\" \n                                                value={cylindricalResults?.volume ? (parseFloat(cylindricalResults.volume) * 1000).toFixed(0) : ''} \n                                                unit=\"\u0644\u06cc\u062a\u0631\" \n                                                description=\"\u062d\u062c\u0645 \u06a9\u0644 \u0622\u0628 \u0628\u0647 \u0644\u06cc\u062a\u0631\" \n                                            \/>\n                                        <\/div>\n                                    <\/fieldset>\n                                <\/div>\n                            )}\n                        <\/div>\n\n                        <div className=\"mt-6 bg-blue-50 border-r-4 border-blue-500 p-4 md:p-6 rounded-lg\">\n                            <h3 className=\"font-bold text-blue-900 mb-2 text-sm md:text-base\">\u0631\u0627\u0647\u0646\u0645\u0627\u06cc \u0627\u0633\u062a\u0641\u0627\u062f\u0647:<\/h3>\n                            <ul className=\"text-xs md:text-sm text-blue-800 space-y-1\">\n                                <li>\u062a\u0645\u0627\u0645 \u0645\u0642\u0627\u062f\u06cc\u0631 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0645\u062a\u0631 \u0648\u0627\u0631\u062f \u0634\u0648\u0646\u062f<\/li>\n                                <li>\u0645\u0642\u062f\u0627\u0631 \u062a\u0631\u0627\u0646\u0634\u0647 \u0628\u06cc\u0646 \u06f1 \u062a\u0627 \u06f2.\u06f5 \u0645\u062a\u0631 \u0642\u0627\u0628\u0644 \u0642\u0628\u0648\u0644 \u0627\u0633\u062a<\/li>\n                                <li>\u0646\u062a\u0627\u06cc\u062c \u0634\u0627\u0645\u0644 \u0636\u0631\u06cc\u0628 \u0627\u0636\u0627\u0641\u06cc \u0628\u0631\u0627\u06cc \u0627\u062a\u0635\u0627\u0644\u0627\u062a \u0648 \u0644\u0648\u0644\u0647 \u06af\u0630\u0627\u0631\u06cc \u0646\u0645\u06cc\u200c\u0628\u0627\u0634\u062f<\/li>\n                                <li>\u0628\u0631\u0627\u06cc \u0627\u0633\u062a\u062e\u0631 \u0634\u06cc\u0628\u200c\u062f\u0627\u0631 \u062f\u0648 \u0631\u0648\u0634 \u0645\u062d\u0627\u0633\u0628\u0647 \u0648\u062c\u0648\u062f \u062f\u0627\u0631\u062f<\/li>\n                            <\/ul>\n                        <\/div>\n                    <\/div>\n                <\/div>\n            );\n        }\n\n        const root = ReactDOM.createRoot(document.getElementById('pool-calculator-root'));\n        root.render(<PoolCalculator \/>);\n    <\/script>\n    \n<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-1966","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/pages\/1966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/arabel.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1966"}],"version-history":[{"count":31,"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/pages\/1966\/revisions"}],"predecessor-version":[{"id":1999,"href":"https:\/\/arabel.ir\/index.php?rest_route=\/wp\/v2\/pages\/1966\/revisions\/1999"}],"wp:attachment":[{"href":"https:\/\/arabel.ir\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}