{"id":27407,"date":"2025-07-10T00:07:06","date_gmt":"2025-07-09T22:07:06","guid":{"rendered":"https:\/\/konradpodgorski.pl\/pro\/?page_id=27407"},"modified":"2025-07-10T00:08:11","modified_gmt":"2025-07-09T22:08:11","slug":"kalkulator-whr","status":"publish","type":"page","link":"https:\/\/konradpodgorski.pl\/pro\/kalkulator-whr\/","title":{"rendered":"kalkulator whr"},"content":{"rendered":"\n<div class=\"wp-block-group has-base-3-color has-text-color has-background has-link-color wp-elements-d26245fe954caef912f93493a265e565\" style=\"background-color:#1a1a1a\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n    <section class=\"kalkulator-whr\" id=\"whr-kalkulator\">\n        <h1 class=\"title\">KALKULATOR WHR &#8211; PROPORCJE TALIA\/BIODRA \ud83d\udccf<\/h1>\n        \n        <div class=\"formula\">\n            WHR = Obw\u00f3d talii (cm) \u00f7 Obw\u00f3d bioder (cm)\n        <\/div>\n\n        <form id=\"whrCalculator\" class=\"form-grid\">\n            <div class=\"form-group\">\n                <label for=\"whr-waist\">Obw\u00f3d talii (cm)<\/label>\n                <input type=\"number\" id=\"whr-waist\" required min=\"1\" step=\"0.1\" placeholder=\"np. 75\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"whr-hip\">Obw\u00f3d bioder (cm)<\/label>\n                <input type=\"number\" id=\"whr-hip\" required min=\"1\" step=\"0.1\" placeholder=\"np. 95\">\n            <\/div>\n\n            <div class=\"form-group\">\n                <label for=\"whr-gender\">P\u0142e\u0107<\/label>\n                <select id=\"whr-gender\" required>\n                    <option value=\"\">Wybierz p\u0142e\u0107<\/option>\n                    <option value=\"male\">M\u0119\u017cczyzna<\/option>\n                    <option value=\"female\">Kobieta<\/option>\n                <\/select>\n            <\/div>\n            \n            <button type=\"submit\">Oblicz WHR<\/button>\n        <\/form>\n\n        <div id=\"whrResults\" class=\"results\">\n            <h3>Tw\u00f3j wska\u017anik WHR:<\/h3>\n            <div id=\"finalWhrResult\" class=\"result-item\"><\/div>\n            <div id=\"whrInterpretation\" class=\"interpretation\"><\/div>\n            <div id=\"whrHealthRisk\" class=\"health-risk\"><\/div>\n        <\/div>\n    <\/section>\n<style>\n        .kalkulator-whr {\n            max-width: 900px;\n            margin: 2rem auto;\n            padding: 2rem;\n            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);\n            border-radius: 15px;\n            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);\n            box-sizing: border-box;\n        }\n\n        .kalkulator-whr .title {\n            color: #fff;\n            font-size: 2rem;\n            text-align: center;\n            margin-bottom: 2rem;\n            padding-bottom: 1rem;\n            border-bottom: 2px solid #7B2CBF;\n        }\n\n        .kalkulator-whr .formula {\n            color: #e2e2e2;\n            margin-bottom: 2rem;\n            padding: 1rem;\n            background: rgba(255, 255, 255, 0.05);\n            border-radius: 8px;\n            text-align: center;\n            font-size: 1.1rem;\n        }\n\n        .kalkulator-whr .form-grid {\n            display: grid;\n            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\n            gap: 1.5rem;\n            margin-bottom: 2rem;\n        }\n\n        .kalkulator-whr .form-group {\n            margin-bottom: 1.2rem;\n        }\n\n        .kalkulator-whr label {\n            display: block;\n            color: #e2e2e2;\n            margin-bottom: 0.5rem;\n            font-weight: 500;\n        }\n\n        .kalkulator-whr select,\n        .kalkulator-whr input {\n            width: 100%;\n            padding: 0.8rem;\n            background-color: #1c1c2e;\n            border: 2px solid rgba(44, 207, 191, 0.3);\n            border-radius: 8px;\n            color: #fff;\n            transition: all 0.3s ease;\n            box-sizing: border-box;\n        }\n\n        .kalkulator-whr select {\n            cursor: pointer;\n        }\n\n        .kalkulator-whr select option {\n            background-color: #1c1c2e;\n            color: #fff;\n            padding: 8px;\n        }\n\n        .kalkulator-whr input::placeholder {\n            color: #888;\n        }\n\n        .kalkulator-whr select:focus,\n        .kalkulator-whr input:focus {\n            outline: none;\n            border-color: #9D4EDD;\n            box-shadow: 0 0 0 3px rgba(44, 207, 191, 0.25);\n        }\n\n        .kalkulator-whr button {\n            width: 100%;\n            padding: 1rem;\n            background: linear-gradient(45deg, #7B2CBF, #9D4EDD);\n            border: none;\n            border-radius: 8px;\n            color: #fff;\n            font-size: 1.1rem;\n            font-weight: 600;\n            cursor: pointer;\n            transition: all 0.3s ease;\n            grid-column: 1 \/ -1;\n        }\n\n        .kalkulator-whr button:hover {\n            background: linear-gradient(45deg, #9D4EDD, #7B2CBF);\n            transform: translateY(-2px);\n        }\n\n        .kalkulator-whr .results {\n            margin-top: 1.5rem;\n            padding: 1.5rem;\n            background: rgba(255, 255, 255, 0.05);\n            border-radius: 8px;\n            color: #fff;\n            display: none;\n            text-align: center;\n        }\n\n        .kalkulator-whr .results h3 {\n            color: #9D4EDD;\n            margin-bottom: 1rem;\n            font-size: 1.5rem;\n        }\n\n        .kalkulator-whr .result-item {\n            margin: 0.5rem 0;\n            padding: 1rem;\n            background: rgba(255, 255, 255, 0.02);\n            border-radius: 5px;\n            font-size: 1.5rem;\n            font-weight: bold;\n            color: #7B2CBF;\n        }\n\n        .kalkulator-whr .interpretation {\n            margin: 1rem 0;\n            padding: 1rem;\n            background: rgba(255, 255, 255, 0.08);\n            border-radius: 8px;\n            font-size: 1.1rem;\n            line-height: 1.5;\n        }\n\n        .kalkulator-whr .health-risk {\n            margin: 1rem 0;\n            padding: 1rem;\n            border-radius: 8px;\n            font-size: 1rem;\n            font-weight: 500;\n            border-left: 4px solid;\n        }\n\n        .risk-low {\n            background: rgba(46, 125, 50, 0.2);\n            border-left-color: #4caf50;\n            color: #81c784;\n        }\n\n        .risk-moderate {\n            background: rgba(255, 152, 0, 0.2);\n            border-left-color: #ff9800;\n            color: #ffb74d;\n        }\n\n        .risk-high {\n            background: rgba(211, 47, 47, 0.2);\n            border-left-color: #f44336;\n            color: #e57373;\n        }\n\n        @media (max-width: 768px) {\n            .kalkulator-whr {\n                margin: 1rem;\n                padding: 1.5rem;\n            }\n\n            .kalkulator-whr .title {\n                font-size: 1.5rem;\n            }\n\n            .kalkulator-whr .form-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n<\/style>\n    <script>\n        document.getElementById('whrCalculator').addEventListener('submit', function(e) {\n            e.preventDefault();\n            \n            const waist = parseFloat(document.getElementById('whr-waist').value);\n            const hip = parseFloat(document.getElementById('whr-hip').value);\n            const gender = document.getElementById('whr-gender').value;\n            \n            \/\/ Walidacja danych\n            if (isNaN(waist) || waist <= 0) {\n                alert(\"Prosz\u0119 poda\u0107 prawid\u0142owy obw\u00f3d talii.\");\n                return;\n            }\n\n            if (isNaN(hip) || hip <= 0) {\n                alert(\"Prosz\u0119 poda\u0107 prawid\u0142owy obw\u00f3d bioder.\");\n                return;\n            }\n\n            if (!gender) {\n                alert(\"Prosz\u0119 wybra\u0107 p\u0142e\u0107.\");\n                return;\n            }\n\n            \/\/ Obliczenie WHR\n            const whr = (waist \/ hip).toFixed(3);\n            \n            \/\/ Interpretacja wynik\u00f3w\n            let interpretation = \"\";\n            let healthRisk = \"\";\n            let riskClass = \"\";\n\n            if (gender === \"male\") {\n                if (whr < 0.85) {\n                    interpretation = \"Bardzo dobry wska\u017anik proporcji\";\n                    healthRisk = \"Niskie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-low\";\n                } else if (whr <= 0.90) {\n                    interpretation = \"Dobry wska\u017anik proporcji\";\n                    healthRisk = \"Niskie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-low\";\n                } else if (whr <= 0.95) {\n                    interpretation = \"Umiarkowane ryzyko\";\n                    healthRisk = \"Umiarkowane ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-moderate\";\n                } else {\n                    interpretation = \"Wysokie ryzyko\";\n                    healthRisk = \"Wysokie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-high\";\n                }\n            } else { \/\/ female\n                if (whr < 0.80) {\n                    interpretation = \"Bardzo dobry wska\u017anik proporcji\";\n                    healthRisk = \"Niskie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-low\";\n                } else if (whr <= 0.85) {\n                    interpretation = \"Dobry wska\u017anik proporcji\";\n                    healthRisk = \"Niskie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-low\";\n                } else if (whr <= 0.90) {\n                    interpretation = \"Umiarkowane ryzyko\";\n                    healthRisk = \"Umiarkowane ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-moderate\";\n                } else {\n                    interpretation = \"Wysokie ryzyko\";\n                    healthRisk = \"Wysokie ryzyko powik\u0142a\u0144 zdrowotnych\";\n                    riskClass = \"risk-high\";\n                }\n            }\n\n            \/\/ Wy\u015bwietlenie wynik\u00f3w\n            document.getElementById('whrResults').style.display = 'block';\n            document.getElementById('finalWhrResult').textContent = whr;\n            document.getElementById('whrInterpretation').textContent = interpretation;\n            \n            const healthRiskElement = document.getElementById('whrHealthRisk');\n            healthRiskElement.textContent = healthRisk;\n            healthRiskElement.className = `health-risk ${riskClass}`;\n\n            \/\/ P\u0142ynne przewini\u0119cie do wynik\u00f3w\n            document.getElementById('whrResults').scrollIntoView({ \n                behavior: 'smooth', \n                block: 'center' \n            });\n        });\n\n        \/\/ Dodanie efektu hover na inputy\n        document.querySelectorAll('.kalkulator-whr input, .kalkulator-whr select').forEach(element => {\n            element.addEventListener('mouseenter', function() {\n                this.style.borderColor = 'rgba(157, 78, 221, 0.5)';\n            });\n            \n            element.addEventListener('mouseleave', function() {\n                if (this !== document.activeElement) {\n                    this.style.borderColor = 'rgba(44, 207, 191, 0.3)';\n                }\n            });\n        });\n    <\/script>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n<\/div><\/div>\n\n\n\n<style>\n.content-area {\nbackground-color: #1a1a1a;\n}\n<\/style>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>KALKULATOR WHR &#8211; PROPORCJE TALIA\/BIODRA \ud83d\udccf WHR = Obw\u00f3d talii (cm) \u00f7 Obw\u00f3d bioder (cm) Obw\u00f3d talii (cm) Obw\u00f3d bioder (cm) P\u0142e\u0107 Wybierz p\u0142e\u0107M\u0119\u017cczyznaKobieta Oblicz WHR Tw\u00f3j wska\u017anik WHR:<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_hide_header":false,"footnotes":""},"class_list":["post-27407","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/pages\/27407","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/comments?post=27407"}],"version-history":[{"count":1,"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/pages\/27407\/revisions"}],"predecessor-version":[{"id":27408,"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/pages\/27407\/revisions\/27408"}],"wp:attachment":[{"href":"https:\/\/konradpodgorski.pl\/pro\/wp-json\/wp\/v2\/media?parent=27407"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}