{"id":1476,"date":"2026-05-11T10:46:52","date_gmt":"2026-05-11T10:46:52","guid":{"rendered":"https:\/\/aiper.com\/blogs\/?page_id=1476"},"modified":"2026-06-24T03:46:02","modified_gmt":"2026-06-24T03:46:02","slug":"pool-surface-area-calculator","status":"publish","type":"page","link":"https:\/\/aiper.com\/blogs\/pool-surface-area-calculator\/","title":{"rendered":"Pool Surface Area Calculator"},"content":{"rendered":"\n<style>\n    \/* \u6b64\u5904\u4fdd\u7559\u4f60\u539f\u6709\u7684 CSS \u6837\u5f0f\u90e8\u5206\uff0c\u672a\u505a\u53d8\u52a8 *\/\n    :root {\n        --psac-teal: #1ecad3;\n        --psac-teal-dark: #17a8b0;\n        --psac-teal-light: #e8fafb;\n        --psac-bg: #f7f8fa;\n        --psac-card: #ffffff;\n        --psac-text: #1a1a2e;\n        --psac-text-light: #4a5568;\n        --psac-text-muted: #8896a6;\n        --psac-border: #e2e8f0;\n        --psac-border-active: #1ecad3;\n        --psac-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);\n        --psac-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);\n        --psac-radius: 14px;\n        --psac-radius-sm: 10px;\n        --psac-radius-xs: 7px;\n        --psac-transition: 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n        --psac-font: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n        --psac-danger: #e53e3e;\n        --psac-disabled-bg: #f1f5f9;\n        --psac-disabled-text: #b0bec5;\n    }\n\n    .psac-wrap {\n        font-family: var(--psac-font);\n        max-width: 920px;\n        margin: 30px auto;\n        padding: 30px 28px;\n        background: #fff;\n        border-radius: 18px;\n        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);\n        color: var(--psac-text);\n        box-sizing: border-box;\n        line-height: 1.5;\n        -webkit-font-smoothing: antialiased;\n    }\n    .psac-wrap *, .psac-wrap *::before, .psac-wrap *::after { box-sizing: border-box; }\n    .psac-step { margin-bottom: 32px; }\n    .psac-step-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }\n    .psac-step-num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: var(--psac-teal); color: #fff; font-size: 14px; font-weight: 700; flex-shrink: 0; }\n    .psac-step-title { font-size: 17px; font-weight: 700; color: var(--psac-text); letter-spacing: -0.2px; }\n    .psac-step-subtitle { font-size: 12px; color: var(--psac-text-muted); font-weight: 400; margin-top: -1px; }\n    .psac-shape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }\n    @media (max-width: 700px) { .psac-shape-grid { grid-template-columns: repeat(2, 1fr); } }\n    @media (max-width: 420px) { .psac-shape-grid { grid-template-columns: 1fr 1fr; gap: 8px; } .psac-wrap { padding: 16px 12px; margin: 12px; } }\n    .psac-shape-card { border: 2px solid var(--psac-border); border-radius: var(--psac-radius-sm); padding: 14px 8px; text-align: center; cursor: pointer; transition: all var(--psac-transition); background: #fff; display: flex; flex-direction: column; align-items: center; gap: 7px; min-height: 105px; justify-content: center; -webkit-tap-highlight-color: transparent; outline: none; user-select: none; }\n    .psac-shape-card:hover:not(.psac-disabled) { border-color: var(--psac-teal); background: var(--psac-teal-light); transform: translateY(-2px); box-shadow: 0 4px 16px rgba(30, 202, 211, 0.12); }\n    .psac-shape-card.psac-active { border-color: var(--psac-teal); background: #e0f7f9; box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.14); font-weight: 600; }\n    .psac-shape-card.psac-disabled { opacity: 0.4; cursor: not-allowed; background: var(--psac-disabled-bg); pointer-events: none; }\n    .psac-shape-icon { width: 44px; height: 40px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }\n    .psac-shape-icon svg { width: 100%; height: 100%; }\n    .psac-shape-label { font-size: 12.5px; font-weight: 500; color: var(--psac-text); line-height: 1.2; letter-spacing: -0.1px; }\n    .psac-type-row { display: flex; gap: 12px; flex-wrap: wrap; max-width: 480px; }\n    .psac-type-card { flex: 1; min-width: 150px; padding: 14px 18px; border: 2px solid var(--psac-border); border-radius: var(--psac-radius-sm); background: #fff; cursor: pointer; text-align: center; transition: all var(--psac-transition); -webkit-tap-highlight-color: transparent; outline: none; user-select: none; display: flex; flex-direction: column; align-items: center; gap: 5px; justify-content: center; }\n    .psac-type-card:hover:not(.psac-disabled) { border-color: var(--psac-teal); background: var(--psac-teal-light); }\n    .psac-type-card.psac-active { border-color: var(--psac-teal); background: #e0f7f9; box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.14); }\n    .psac-type-card.psac-disabled { background: var(--psac-disabled-bg); color: var(--psac-disabled-text); cursor: not-allowed; border-color: var(--psac-border); opacity: 0.5; pointer-events: none; text-decoration: line-through; text-decoration-color: #cbd5e0; text-decoration-thickness: 1px; }\n    .psac-type-label { font-size: 14px; font-weight: 600; color: var(--psac-text); letter-spacing: -0.1px; }\n    .psac-type-note { font-size: 12px; color: var(--psac-text-muted); margin-top: 8px; font-style: italic; }\n    .psac-unit-toggle-row { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }\n    .psac-unit-toggle-label { font-size: 12px; font-weight: 600; color: var(--psac-text-light); text-transform: uppercase; letter-spacing: 0.4px; }\n    .psac-unit-pills { display: inline-flex; background: #f1f5f9; border-radius: 30px; padding: 4px; border: 1px solid var(--psac-border); }\n    .psac-unit-pill { border: none; background: transparent; padding: 7px 17px; border-radius: 30px; cursor: pointer; font-size: 13px; font-weight: 500; color: #64748b; transition: all var(--psac-transition); -webkit-tap-highlight-color: transparent; outline: none; white-space: nowrap; }\n    .psac-unit-pill.psac-active-pill { background: var(--psac-teal); color: #fff; font-weight: 600; }\n    .psac-inputs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 13px; }\n    @media (max-width: 500px) { .psac-inputs-grid { grid-template-columns: 1fr 1fr; } }\n    .psac-field { display: flex; flex-direction: column; gap: 4px; }\n    .psac-field label { font-size: 12px; font-weight: 600; color: var(--psac-text-light); text-transform: uppercase; letter-spacing: 0.3px; }\n    .psac-field input { width: 100%; padding: 10px 13px; border: 2px solid var(--psac-border); border-radius: var(--psac-radius-xs); font-size: 15px; font-family: var(--psac-font); transition: border var(--psac-transition); background: #fafbfc; color: var(--psac-text); outline: none; }\n    .psac-field input:focus { border-color: var(--psac-teal); box-shadow: 0 0 0 3px rgba(30, 202, 211, 0.08); background: #fff; }\n    .psac-calc-btn { display: block; width: 100%; max-width: 300px; margin: 26px auto 0; padding: 14px 32px; background: var(--psac-teal); color: #fff; border: none; border-radius: 999px; font-size: 16px; font-weight: 700; cursor: pointer; letter-spacing: 0.4px; transition: all var(--psac-transition); text-transform: uppercase; box-shadow: 0 4px 16px rgba(30, 202, 211, 0.28); }\n    .psac-error { color: var(--psac-danger); font-size: 13px; font-weight: 600; text-align: center; margin-top: 10px; padding: 8px 14px; background: #fef2f2; border-radius: var(--psac-radius-xs); border: 1px solid #fecaca; display: none; }\n    .psac-result-wrap { margin-top: 28px; display: none; }\n    .psac-result-card { padding: 24px 22px; background: linear-gradient(135deg, #eafdfd 0%, #f5fefe 100%); border-radius: var(--psac-radius); border: 1px solid #b8e8eb; }\n    .psac-result-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }\n    .psac-result-title { font-size: 16px; font-weight: 700; color: #0e7a82; letter-spacing: -0.2px; }\n    .psac-result-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }\n    .psac-result-item { background: #fff; border-radius: var(--psac-radius-sm); padding: 14px 12px; text-align: center; border: 1px solid #e0eeef; }\n    .psac-result-value { font-size: 24px; font-weight: 700; color: var(--psac-teal-dark); letter-spacing: -0.4px; line-height: 1.1; display: block; }\n    .psac-result-label { font-size: 11px; font-weight: 600; color: var(--psac-text-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.4px; }\n    .psac-finish-note { font-size: 10.5px; color: #64748b; font-weight: 500; margin-top: 2px; }\n    .psac-material-text { background: #fff; border-radius: var(--psac-radius-sm); padding: 14px 16px; border: 1px solid #d1e8ea; font-size: 14px; color: var(--psac-text-light); line-height: 1.6; margin-bottom: 18px; }\n    .psac-material-text strong { color: var(--psac-teal-dark); font-weight: 700; }\n    .psac-reco-section { margin-top: 16px; border-top: 1px solid #c9e6e9; padding-top: 16px; }\n    .psac-reco-title { font-size: 14px; font-weight: 700; color: #0e7a82; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }\n    .psac-reco-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 8px; }\n    .psac-reco-card { background: #fff; border-radius: var(--psac-radius-sm); padding: 12px 14px; border: 1px solid #e0eeef; font-size: 13px; color: var(--psac-text-light); }\n    .psac-reco-card strong { display: block; color: var(--psac-text); font-size: 13.5px; margin-bottom: 3px; }\n    .psac-cost-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 8px; }\n    .psac-cost-item { padding: 9px 11px; background: #fff; border-radius: 7px; border: 1px solid #e0eeef; }\n    .psac-cost-region { font-size: 10.5px; color: #64748b; text-transform: uppercase; font-weight: 600; }\n    .psac-cost-val { font-size: 13px; color: var(--psac-text); font-weight: 600; }\n<\/style>\n\n<div class=\"psac-wrap\" id=\"psac-calc-root\">\n    <div class=\"psac-step\">\n        <div class=\"psac-step-header\">\n            <span class=\"psac-step-num\">1<\/span>\n            <div>\n                <div class=\"psac-step-title\">Select Pool Shape<\/div>\n                <div class=\"psac-step-subtitle\">Choose the shape that best matches your pool<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"psac-shape-grid\" id=\"psac-shape-grid\">\n            <div class=\"psac-shape-card\" data-shape=\"rectangular\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 50 38\" fill=\"none\"><rect x=\"3\" y=\"3\" width=\"44\" height=\"32\" rx=\"3\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Rectangular<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"l-shaped\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 50 42\" fill=\"none\"><path d=\"M5,5 L33,5 L33,21 L21,21 L21,37 L5,37 Z\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">L-Shaped<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"circle\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 42 42\" fill=\"none\"><circle cx=\"21\" cy=\"21\" r=\"18\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Circle<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"triangular\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 46 40\" fill=\"none\"><polygon points=\"23,3 43,37 3,37\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Triangular<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"kidney\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 48 38\" fill=\"none\"><path d=\"M36,5 C26,5 20,15 16,19 C10,25 3,29 3,21 C3,11 13,5 21,11 C25,14 27,9 36,5 Z\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\" stroke-linejoin=\"round\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Kidney<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"oval\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 50 34\" fill=\"none\"><ellipse cx=\"25\" cy=\"17\" rx=\"23\" ry=\"15\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Oval<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"oblong\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 50 32\" fill=\"none\"><rect x=\"9\" y=\"4\" width=\"32\" height=\"24\" rx=\"12\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Oblong<\/div>\n            <\/div>\n            <div class=\"psac-shape-card\" data-shape=\"roman\">\n                <div class=\"psac-shape-icon\"><svg viewBox=\"0 0 50 32\" fill=\"none\"><path d=\"M10,4 H36 Q46,4 46,16 Q46,28 36,28 H10 Z\" stroke=\"#1ecad3\" stroke-width=\"2.8\" fill=\"#e8fafb\"\/><\/svg><\/div>\n                <div class=\"psac-shape-label\">Roman<\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"psac-step\">\n        <div class=\"psac-step-header\">\n            <span class=\"psac-step-num\">2<\/span>\n            <div>\n                <div class=\"psac-step-title\">Select Pool Type<\/div>\n                <div class=\"psac-step-subtitle\">Above Ground or In Ground installation<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"psac-type-row\" id=\"psac-type-row\">\n            <div class=\"psac-type-card\" data-type=\"above-ground\">\n                <span class=\"psac-type-label\">Above Ground<\/span>\n            <\/div>\n            <div class=\"psac-type-card psac-active\" data-type=\"in-ground\">\n                <span class=\"psac-type-label\">In Ground<\/span>\n            <\/div>\n        <\/div>\n        <p class=\"psac-type-note\" id=\"psac-type-note\"><\/p>\n    <\/div>\n\n    <div class=\"psac-step\">\n        <div class=\"psac-step-header\">\n            <span class=\"psac-step-num\">3<\/span>\n            <div>\n                <div class=\"psac-step-title\">Enter Pool Dimensions<\/div>\n                <div class=\"psac-step-subtitle\">Provide measurements for accurate calculation<\/div>\n            <\/div>\n        <\/div>\n        <div class=\"psac-unit-toggle-row\">\n            <span class=\"psac-unit-toggle-label\">Input Unit:<\/span>\n            <div class=\"psac-unit-pills\" id=\"psac-input-unit-pills\">\n                <button class=\"psac-unit-pill psac-active-pill\" data-unit=\"ft\">Feet (ft)<\/button>\n                <button class=\"psac-unit-pill\" data-unit=\"m\">Meters (m)<\/button>\n            <\/div>\n        <\/div>\n        <div class=\"psac-inputs-grid\" id=\"psac-inputs-grid\"><\/div>\n    <\/div>\n\n    <button class=\"psac-calc-btn\" id=\"psac-calc-btn\">Calculate<\/button>\n    <div class=\"psac-error\" id=\"psac-error\"><\/div>\n\n    <div class=\"psac-result-wrap\" id=\"psac-result-wrap\">\n        <div class=\"psac-result-card\">\n            <div class=\"psac-result-header\">\n                <span class=\"psac-result-title\">Calculation Results<\/span>\n                <div class=\"psac-result-toggle\">\n                    <span style=\"font-size:11px;font-weight:600;color:#64748b;\">Display:<\/span>\n                    <div class=\"psac-unit-pills\" id=\"psac-result-unit-pills\">\n                        <button class=\"psac-unit-pill psac-active-pill\" data-result-unit=\"imperial\">Imperial<\/button>\n                        <button class=\"psac-unit-pill\" data-result-unit=\"metric\">Metric<\/button>\n                    <\/div>\n                <\/div>\n            <\/div>\n            <div class=\"psac-result-grid\">\n                <div class=\"psac-result-item\">\n                    <span class=\"psac-result-value\" id=\"psac-val-area\">&#8212;<\/span>\n                    <span class=\"psac-result-label\">Surface Area<\/span>\n                <\/div>\n                <div class=\"psac-result-item\">\n                    <span class=\"psac-result-value\" id=\"psac-val-volume\">&#8212;<\/span>\n                    <span class=\"psac-result-label\">Water Volume<\/span>\n                <\/div>\n                <div class=\"psac-result-item\">\n                    <span class=\"psac-result-value\" id=\"psac-val-primer\">&#8212;<\/span>\n                    <span class=\"psac-result-label\">Primer Required<\/span>\n                <\/div>\n                <div class=\"psac-result-item\">\n                    <span class=\"psac-result-value\" id=\"psac-val-finish\">&#8212;<\/span>\n                    <span class=\"psac-result-label\">Finish Required<\/span>\n                    <div class=\"psac-finish-note\" id=\"psac-finish-note\"><\/div>\n                <\/div>\n            <\/div>\n            <div class=\"psac-material-text\" id=\"psac-material-text\"><\/div>\n            <div class=\"psac-reco-section\">\n                <div class=\"psac-reco-title\">Recommendations &#038; Estimates<\/div>\n                <div class=\"psac-reco-grid\" id=\"psac-reco-grid\"><\/div>\n            <\/div>\n            <div class=\"psac-reco-section\">\n                <div class=\"psac-reco-title\">Estimated Water Cost (Initial Fill)<\/div>\n                <div class=\"psac-cost-grid\" id=\"psac-cost-grid\"><\/div>\n            <\/div>\n            <p class=\"psac-disclaimer\">* All calculations are estimates. Actual requirements vary based on pool construction, local conditions, and product specifications.<\/p>\n        <\/div>\n    <\/div>\n<\/div>\n\n<script>\n    (function() {\n        const root = document.getElementById('psac-calc-root');\n        if (!root) return;\n\n        let state = {\n            shape: null,\n            poolType: 'in-ground',\n            inputUnit: 'ft',\n            resultUnit: 'imperial',\n            computed: null,\n        };\n\n        const shapeFields = {\n            'circle': [{ key: 'diameter', label: 'Diameter' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'oval': [{ key: 'length', label: 'Length' }, { key: 'width', label: 'Width' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'rectangular': [{ key: 'length', label: 'Length' }, { key: 'width', label: 'Width' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'l-shaped': [{ key: 'length1', label: 'Length 1' }, { key: 'length2', label: 'Length 2' }, { key: 'length3', label: 'Length 3' }, { key: 'length4', label: 'Length 4' }, { key: 'width1', label: 'Width 1' }, { key: 'width2', label: 'Width 2' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'triangular': [{ key: 'length', label: 'Length (Base)' }, { key: 'width', label: 'Width (Height)' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'kidney': [{ key: 'length', label: 'Length' }, { key: 'width1', label: 'Width 1' }, { key: 'width2', label: 'Width 2' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'oblong': [{ key: 'length', label: 'Length' }, { key: 'width', label: 'Width' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n            'roman': [{ key: 'width', label: 'Width' }, { key: 'length1', label: 'Length 1' }, { key: 'length2', label: 'Length 2' }, { key: 'minDepth', label: 'Min Depth' }, { key: 'maxDepth', label: 'Max Depth' }],\n        };\n\n        const inGroundOnlyShapes = ['l-shaped', 'triangular', 'kidney', 'roman'];\n        const aboveGroundOnlyShapes = ['circle'];\n\n        \/\/ --- DOM Elements ---\n        const shapeGrid = document.getElementById('psac-shape-grid');\n        const typeRow = document.getElementById('psac-type-row');\n        const typeNote = document.getElementById('psac-type-note');\n        const inputsGrid = document.getElementById('psac-inputs-grid');\n        const calcBtn = document.getElementById('psac-calc-btn');\n        const errorBox = document.getElementById('psac-error');\n        const resultWrap = document.getElementById('psac-result-wrap');\n        const recoGrid = document.getElementById('psac-reco-grid');\n        const costGrid = document.getElementById('psac-cost-grid');\n        const inputUnitPills = document.getElementById('psac-input-unit-pills');\n        const resultUnitPills = document.getElementById('psac-result-unit-pills');\n        const valArea = document.getElementById('psac-val-area');\n        const valVolume = document.getElementById('psac-val-volume');\n        const valPrimer = document.getElementById('psac-val-primer');\n        const valFinish = document.getElementById('psac-val-finish');\n        const finishNote = document.getElementById('psac-finish-note');\n        const materialText = document.getElementById('psac-material-text');\n\n        function toFeet(v) { return state.inputUnit === 'ft' ? v : v * 3.28084; }\n        function sqFtToSqM(v) { return v * 0.092903; }\n        function cuFtToGal(v) { return v * 7.48052; }\n        function galToLiters(v) { return v * 3.78541; }\n\n        \/\/ --- Logic Functions ---\n\n        function calculate(vals) {\n            const dims = {};\n            for (const [k, v] of Object.entries(vals)) {\n                if (k === '_allValid') continue;\n                dims[k] = toFeet(v);\n            }\n\n            let areaSqFt = 0;\n            switch (state.shape) {\n                case 'circle': areaSqFt = Math.PI * Math.pow(dims.diameter \/ 2, 2); break;\n                case 'oval': areaSqFt = Math.PI * (dims.length \/ 2) * (dims.width \/ 2); break;\n                case 'rectangular': areaSqFt = dims.length * dims.width; break;\n                case 'l-shaped': areaSqFt = (dims.length1 * dims.width1) + (dims.length3 * dims.width2); break;\n                case 'triangular': areaSqFt = 0.5 * dims.length * dims.width; break;\n                case 'kidney': areaSqFt = dims.length * ((dims.width1 + dims.width2) \/ 2) * 0.88; break;\n                case 'oblong': areaSqFt = (Math.max(0, dims.length - dims.width) * dims.width) + (Math.PI * Math.pow(dims.width \/ 2, 2)); break;\n                case 'roman': areaSqFt = (dims.length1 * dims.width) + (Math.PI * Math.pow(dims.width \/ 2, 2)); break;\n            }\n\n            const avgDepthFt = (dims.minDepth + dims.maxDepth) \/ 2;\n            const volCuFt = areaSqFt * avgDepthFt;\n            const volGal = cuFtToGal(volCuFt);\n\n            \/\/ --- Updated Material Logic ---\n            \/\/ \u8986\u76d6\u7387\u6807\u51c6: \u5e95\u6f06\u7ea6 60 sq ft\/unit, \u9762\u6f06\u7ea6 45 sq ft\/unit (\u6bcf\u904d)\n            const primerUnits = Math.ceil(areaSqFt \/ 60);\n            const finishBase = areaSqFt \/ 45;\n            const finishMinUnits = Math.ceil(finishBase * 2); \/\/ 2\u904d\n            const finishRecUnits = Math.ceil(finishBase * 3); \/\/ 3\u904d\n\n            return {\n                areaSqFt, areaSqM: sqFtToSqM(areaSqFt),\n                volGal, volLiters: galToLiters(volGal), volCuM: galToLiters(volGal) \/ 1000,\n                primerUnits,\n                finishMinUnits,\n                finishRecUnits\n            };\n        }\n\n        function updateResultDisplay() {\n            if (!state.computed) return;\n            const r = state.computed;\n            const isImp = state.resultUnit === 'imperial';\n            \n            valArea.textContent = isImp ? \n                Math.round(r.areaSqFt).toLocaleString() + ' sq ft' : \n                Math.round(r.areaSqM).toLocaleString() + ' sq m';\n            \n            valVolume.textContent = isImp ? \n                Math.round(r.volGal).toLocaleString() + ' gal' : \n                Math.round(r.volLiters).toLocaleString() + ' L';\n            \n            \/\/ \u5e95\u6f06\u663e\u793a\u4e3a units\n            valPrimer.textContent = r.primerUnits + ' units';\n            \n            \/\/ \u9762\u6f06\u663e\u793a\u8303\u56f4\n            valFinish.textContent = `${r.finishMinUnits} - ${r.finishRecUnits} units`;\n            finishNote.textContent = `Based on 2-3 coats`;\n        }\n\n        function updateMaterialText(r) {\n            const isImp = state.resultUnit === 'imperial';\n            const areaLabel = isImp ? Math.round(r.areaSqFt) + ' sq ft' : Math.round(r.areaSqM) + ' sq m';\n\n            materialText.innerHTML = `\n                Based on a surface area of <strong>${areaLabel}<\/strong>:<br>\n                \u2022 <strong>Primer:<\/strong> <strong>${r.primerUnits} units<\/strong> required for full coverage.<br>\n                \u2022 <strong>Finish:<\/strong> A minimum of <strong>${r.finishMinUnits} units<\/strong> is required for 2 coats. We strongly recommend <strong>${r.finishRecUnits} units<\/strong> for a professional 3-coat finish.\n            `;\n        }\n\n        \/\/ --- \u5176\u4ed6\u8f85\u52a9 UI \u51fd\u6570 ---\n\n        function updateRecommendations(r) {\n            const isImp = state.resultUnit === 'imperial';\n            const shockLbs = Math.round((r.volGal \/ 10000) * 3 * 10) \/ 10;\n            const weeklyLbs = Math.round((r.volGal \/ 10000) * 1.5 * 10) \/ 10;\n            const chemDosage = isImp ?\n                `Initial shock: ~${shockLbs} lbs chlorine. Weekly: ~${weeklyLbs} lbs.` :\n                `Initial shock: ~${Math.round(shockLbs * 0.45)} kg chlorine. Weekly: ~${Math.round(weeklyLbs * 0.45)} kg.`;\n\n            recoGrid.innerHTML = `\n                <div class=\"psac-reco-card\"><strong>Pool Cover<\/strong>Standard cover for shape recommended.<\/div>\n                <div class=\"psac-reco-card\"><strong><a href=\"https:\/\/aiper.com\/blogs\/pool-chemical-calculator\/\">Chemical<\/a> Dosage<\/strong>${chemDosage}<\/div>\n                <div class=\"psac-reco-card\"><strong>Maintenance<\/strong>Regularly check pH and alkalinity.<\/div>\n            `;\n        }\n\n        function updateCostGrid(r) {\n            const gal = r.volGal;\n            const m3 = r.volCuM;\n            const costs = [\n                { region: 'USA (Municipal)', val: '$' + Math.round(gal * 0.008).toLocaleString() },\n                { region: 'UK', val: '\u00a3' + Math.round(m3 * 2.5).toLocaleString() },\n                { region: 'EU', val: '\u20ac' + Math.round(m3 * 2).toLocaleString() }\n            ];\n            costGrid.innerHTML = costs.map(c =>\n                `<div class=\"psac-cost-item\"><div class=\"psac-cost-region\">${c.region}<\/div><div class=\"psac-cost-val\">${c.val}<\/div><\/div>`\n            ).join('');\n        }\n\n        \/\/ --- Event Listeners ---\n\n        shapeGrid.addEventListener('click', function(e) {\n            const card = e.target.closest('.psac-shape-card');\n            if (!card) return;\n            shapeGrid.querySelectorAll('.psac-shape-card').forEach(c => c.classList.remove('psac-active'));\n            card.classList.add('psac-active');\n            state.shape = card.dataset.shape;\n            \n            \/\/ \u5904\u7406\u7c7b\u578b\u7981\u7528\u903b\u8f91\n            const aboveCard = typeRow.querySelector('[data-type=\"above-ground\"]');\n            const inCard = typeRow.querySelector('[data-type=\"in-ground\"]');\n            aboveCard.classList.remove('psac-disabled');\n            inCard.classList.remove('psac-disabled');\n            \n            if (inGroundOnlyShapes.includes(state.shape)) {\n                aboveCard.classList.add('psac-disabled');\n                inCard.click();\n            } else if (aboveGroundOnlyShapes.includes(state.shape)) {\n                inCard.classList.add('psac-disabled');\n                aboveCard.click();\n            }\n\n            renderInputs();\n        });\n\n        typeRow.addEventListener('click', function(e) {\n            const card = e.target.closest('.psac-type-card');\n            if (!card || card.classList.contains('psac-disabled')) return;\n            typeRow.querySelectorAll('.psac-type-card').forEach(c => c.classList.remove('psac-active'));\n            card.classList.add('psac-active');\n            state.poolType = card.dataset.type;\n        });\n\n        inputUnitPills.addEventListener('click', function(e) {\n            const pill = e.target.closest('.psac-unit-pill');\n            if (!pill) return;\n            inputUnitPills.querySelectorAll('.psac-unit-pill').forEach(p => p.classList.remove('psac-active-pill'));\n            pill.classList.add('psac-active-pill');\n            state.inputUnit = pill.dataset.unit;\n            \/\/ \u66f4\u65b0\u8f93\u5165\u6846\u7684\u5355\u4f4d\u663e\u793a (ft\/m)\n            inputsGrid.querySelectorAll('.psac-unit-hint').forEach(h => h.textContent = `(${state.inputUnit})`);\n        });\n\n        resultUnitPills.addEventListener('click', function(e) {\n            const pill = e.target.closest('.psac-unit-pill');\n            if (!pill) return;\n            resultUnitPills.querySelectorAll('.psac-unit-pill').forEach(p => p.classList.remove('psac-active-pill'));\n            pill.classList.add('psac-active-pill');\n            state.resultUnit = pill.dataset.resultUnit;\n            if (state.computed) {\n                updateResultDisplay();\n                updateMaterialText(state.computed);\n                updateRecommendations(state.computed);\n            }\n        });\n\n        calcBtn.addEventListener('click', function() {\n            if (!state.shape) { errorBox.textContent = \"Please select a shape.\"; errorBox.style.display = \"block\"; return; }\n            errorBox.style.display = \"none\";\n            \n            const fields = shapeFields[state.shape];\n            const vals = {};\n            for(let f of fields) {\n                const v = parseFloat(inputsGrid.querySelector(`[data-key=\"${f.key}\"]`).value);\n                if (isNaN(v) || v <= 0) { errorBox.textContent = \"Please enter valid numbers.\"; errorBox.style.display = \"block\"; return; }\n                vals[f.key] = v;\n            }\n\n            const results = calculate(vals);\n            state.computed = results;\n            updateResultDisplay();\n            updateMaterialText(results);\n            updateRecommendations(results);\n            updateCostGrid(results);\n            resultWrap.style.display = \"block\";\n            resultWrap.scrollIntoView({ behavior: 'smooth' });\n        });\n\n        function renderInputs() {\n            if (!state.shape) return;\n            const fields = shapeFields[state.shape];\n            inputsGrid.innerHTML = fields.map(f => `\n                <div class=\"psac-field\">\n                    <label>${f.label} <span class=\"psac-unit-hint\">(${state.inputUnit})<\/span><\/label>\n                    <input type=\"number\" step=\"any\" data-key=\"${f.key}\" placeholder=\"0\">\n                <\/div>\n            `).join('');\n        }\n\n        \/\/ \u521d\u59cb\u5316\u6e32\u67d3\n        renderInputs();\n\n    })();\n<\/script>\n\n\n\n<!-- Pool Surface Area Guide - WordPress Custom HTML Block -->\n<style>\n.pvc-guide-wrap {\n    font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif;\n    max-width: 900px;\n    margin: 30px auto;\n    padding: 30px;\n    background: #fff;\n    border-radius: 16px;\n    box-shadow: 0 4px 20px rgba(0,0,0,.08);\n    color: #222;\n    line-height: 1.6;\n}\n\n.pvc-guide-title {\n    font-size: 24px;\n    font-weight: 700;\n    margin-bottom: 20px;\n    color: #1a1a1a;\n    border-bottom: 3px solid #1ecad3;\n    display: inline-block;\n    padding-bottom: 5px;\n}\n\n.pvc-guide-intro {\n    font-size: 16px;\n    color: #444;\n    margin-bottom: 25px;\n}\n\n.pvc-math-grid {\n    display: grid;\n    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n    gap: 20px;\n}\n\n.pvc-math-card {\n    background: #f8fcfc;\n    border: 1px solid #e0eeef;\n    border-radius: 12px;\n    padding: 20px;\n    transition: transform 0.2s;\n}\n\n.pvc-math-card:hover {\n    border-color: #1ecad3;\n}\n\n.pvc-shape-name {\n    font-weight: 700;\n    font-size: 18px;\n    color: #0e7a82;\n    margin-bottom: 10px;\n    display: flex;\n    align-items: center;\n    gap: 8px;\n}\n\n.pvc-formula {\n    background: #fff;\n    padding: 10px;\n    border-radius: 6px;\n    font-family: \"Courier New\", Courier, monospace;\n    font-weight: 700;\n    color: #1a1a1a;\n    border-left: 4px solid #1ecad3;\n    margin: 10px 0;\n}\n\n.pvc-math-desc {\n    font-size: 14px;\n    color: #666;\n}\n\n.pvc-tip {\n    margin-top: 30px;\n    padding: 15px 20px;\n    background: #e8fafb;\n    border-left: 4px solid #1ecad3;\n    border-radius: 4px;\n    font-size: 15px;\n}\n\n@media (max-width: 600px) {\n    .pvc-guide-wrap { padding: 20px; }\n}\n<\/style>\n\n<div class=\"pvc-guide-wrap\">\n    <h2 class=\"pvc-guide-title\">How to Calculate Pool Surface Area<\/h2>\n    <p class=\"pvc-guide-intro\">\n        Calculating the surface area is the first step in determining how much paint, primer, or finish your pool needs. \n        The formula changes depending on the geometric shape of your pool.\n    <\/p>\n\n    <div class=\"pvc-math-grid\">\n        <!-- Rectangular -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">Rectangular<\/div>\n            <p class=\"pvc-math-desc\">The simplest calculation. Multiply the length by the width.<\/p>\n            <div class=\"pvc-formula\">Length \u00d7 Width<\/div>\n        <\/div>\n\n        <!-- Circle -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">Circular<\/div>\n            <p class=\"pvc-math-desc\">Find the radius (half the diameter) and multiply it by itself, then by Pi (3.14).<\/p>\n            <div class=\"pvc-formula\">3.14 \u00d7 Radius\u00b2<\/div>\n        <\/div>\n\n        <!-- Oval -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">Oval \/ Oblong<\/div>\n            <p class=\"pvc-math-desc\">Multiply the long length by the maximum width, then multiply by a curvature factor (approx. 0.8).<\/p>\n            <div class=\"pvc-formula\">Length \u00d7 Width \u00d7 0.8<\/div>\n        <\/div>\n\n        <!-- Kidney -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">Kidney<\/div>\n            <p class=\"pvc-math-desc\">Measure the total length and the width of both &#8220;bulbs.&#8221; Add the widths together first.<\/p>\n            <div class=\"pvc-formula\">(Width A + Width B) \u00d7 Length \u00d7 0.45<\/div>\n        <\/div>\n\n        <!-- Roman -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">Roman<\/div>\n            <p class=\"pvc-math-desc\">Calculate the center as a rectangle, then add the area of the semi-circle ends.<\/p>\n            <div class=\"pvc-formula\">(L \u00d7 W) + (3.14 \u00d7 Radius\u00b2)<\/div>\n        <\/div>\n\n        <!-- L-Shaped -->\n        <div class=\"pvc-math-card\">\n            <div class=\"pvc-shape-name\">L-Shaped<\/div>\n            <p class=\"pvc-math-desc\">Break the pool into two separate rectangles, calculate both, and add them together.<\/p>\n            <div class=\"pvc-formula\">Area A + Area B<\/div>\n        <\/div>\n    <\/div>\n\n    <div class=\"pvc-tip\">\n        <strong>Pro Tip:<\/strong> When calculating for **Finish** (paint or topcoat), always multiply your final surface area by the number of coats (2 for minimum, 3 for recommended) to ensure you order enough material!\n    <\/div>\n<\/div>\n\n\n<!-- aiper-tool-links -->\n<div class=\"aiper-tool-links\">\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">More Tools<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/pool-fill-time-calculator\/\" class=\"aiper-tl-tag\">Pool Fill Time Calculator<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/pool-turnover-rate-calculator\/\" class=\"aiper-tl-tag\">Pool Turnover Rate Calculator<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/pool-saturation-index-calculator\/\" class=\"aiper-tl-tag\">Pool Saturation Index Calculator<\/a>\n    <\/div>\n  <\/div>\n  <div class=\"aiper-tl-section\">\n    <div class=\"aiper-tl-heading\">Related Articles<\/div>\n    <div class=\"aiper-tl-tags\">\n      <a href=\"https:\/\/aiper.com\/blogs\/how-to-lower-alkalinity-in-pool\/\" class=\"aiper-tl-tag\">How to Lower Alkalinity in a Pool (and When You Actually Need To)<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/pool-robot-gets-stuck-on-main-drain\/\" class=\"aiper-tl-tag\">Why Does Your Pool Robot Get Stuck on the Main Drain?<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/how-to-winterize-inground-pool\/\" class=\"aiper-tl-tag\">How to Winterize an Inground Pool: Step-by-Step<\/a>\n<a href=\"https:\/\/aiper.com\/blogs\/how-to-get-rid-of-algae-in-pool\/\" class=\"aiper-tl-tag\">The Complete Guide to Pool Algae: How to Identify, Treat, and Prevent Every Type<\/a>\n    <\/div>\n  <\/div>\n<\/div>\n\n<style>\n.aiper-tool-links{margin:2.5rem 0 1.5rem;padding:1.5rem 1.75rem;background:linear-gradient(135deg,rgba(148,134,247,.04),rgba(30,202,211,.04));border-radius:12px;border:1px solid rgba(148,134,247,.10)}\n.aiper-tl-section{margin-bottom:1.25rem}\n.aiper-tl-section:last-child{margin-bottom:0}\n.aiper-tl-heading{font-size:.75rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:#8899aa;margin:0 0 .65rem}\n.aiper-tl-tags{display:flex;flex-wrap:wrap;gap:.5rem}\n.aiper-tl-tag{display:inline-block;padding:.4rem .95rem;font-size:.82rem;font-weight:500;line-height:1.35;color:#9486f7;background:rgba(148,134,247,.055);border:1px solid rgba(30,202,211,.25);border-radius:22px;text-decoration:none;transition:all .18s}\n.aiper-tl-tag:hover{background:#1ecad3;color:#fff;border-color:#1ecad3;box-shadow:0 2px 10px rgba(30,202,211,.22)}\n<\/style>","protected":false},"excerpt":{"rendered":"<p>1 Select Pool Shape Choose the shape that best matches your pool Rectangular L-Shaped Circle Triangular Kidney Oval Oblong Roman 2 Select Pool Type Above Ground or In Ground installation Above Ground In Ground 3 Enter Pool Dimensions Provide measurements for accurate calculation Input Unit: Feet (ft) Meters (m) Calculate Calculation Results Display: Imperial Metric&#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-1476","page","type-page","status-publish","hentry"],"lang":"en","translations":{"en":1476,"de":2076,"fr":2077,"es":2078},"_links":{"self":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/1476","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/comments?post=1476"}],"version-history":[{"count":4,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/1476\/revisions"}],"predecessor-version":[{"id":4294,"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/pages\/1476\/revisions\/4294"}],"wp:attachment":[{"href":"https:\/\/aiper.com\/blogs\/wp-json\/wp\/v2\/media?parent=1476"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}