{"id":3009,"date":"2025-02-26T13:38:46","date_gmt":"2025-02-26T12:38:46","guid":{"rendered":"https:\/\/carbonactive.com\/configurator-test\/"},"modified":"2025-04-24T13:53:06","modified_gmt":"2025-04-24T11:53:06","slug":"configurator","status":"publish","type":"page","link":"https:\/\/carbonactive.com\/en\/configurator\/","title":{"rendered":"Configurator"},"content":{"rendered":"<style>.elementor-3009 .elementor-element.elementor-element-d04512f{--display:flex;--min-height:80vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-3009 .elementor-element.elementor-element-9e9cd86{text-align:center;}.elementor-3009 .elementor-element.elementor-element-9e9cd86 .elementor-heading-title{font-family:var( --e-global-typography-b63730e-font-family ), Sans-serif;font-size:var( --e-global-typography-b63730e-font-size );font-weight:var( --e-global-typography-b63730e-font-weight );line-height:var( --e-global-typography-b63730e-line-height );letter-spacing:var( --e-global-typography-b63730e-letter-spacing );word-spacing:var( --e-global-typography-b63730e-word-spacing );}.elementor-3009 .elementor-element.elementor-element-d732036{--display:flex;}.elementor-3009 .elementor-element.elementor-element-1382e48{text-align:center;}.elementor-3009 .elementor-element.elementor-element-1382e48 .elementor-heading-title{font-family:var( --e-global-typography-4e38a26-font-family ), Sans-serif;font-size:var( --e-global-typography-4e38a26-font-size );font-weight:var( --e-global-typography-4e38a26-font-weight );line-height:var( --e-global-typography-4e38a26-line-height );letter-spacing:var( --e-global-typography-4e38a26-letter-spacing );word-spacing:var( --e-global-typography-4e38a26-word-spacing );}.elementor-3009 .elementor-element.elementor-element-09c9255 .elementor-button{border-radius:5px 5px 5px 5px;padding:20px 20px 20px 20px;}:root{--page-title-display:none;}@media(min-width:768px){.elementor-3009 .elementor-element.elementor-element-d04512f{--content-width:1400px;}}@media(max-width:1024px){.elementor-3009 .elementor-element.elementor-element-9e9cd86 .elementor-heading-title{font-size:var( --e-global-typography-b63730e-font-size );line-height:var( --e-global-typography-b63730e-line-height );letter-spacing:var( --e-global-typography-b63730e-letter-spacing );word-spacing:var( --e-global-typography-b63730e-word-spacing );}.elementor-3009 .elementor-element.elementor-element-1382e48 .elementor-heading-title{font-size:var( --e-global-typography-4e38a26-font-size );line-height:var( --e-global-typography-4e38a26-line-height );letter-spacing:var( --e-global-typography-4e38a26-letter-spacing );word-spacing:var( --e-global-typography-4e38a26-word-spacing );}}@media(max-width:767px){.elementor-3009 .elementor-element.elementor-element-9e9cd86 .elementor-heading-title{font-size:var( --e-global-typography-b63730e-font-size );line-height:var( --e-global-typography-b63730e-line-height );letter-spacing:var( --e-global-typography-b63730e-letter-spacing );word-spacing:var( --e-global-typography-b63730e-word-spacing );}.elementor-3009 .elementor-element.elementor-element-1382e48 .elementor-heading-title{font-size:var( --e-global-typography-4e38a26-font-size );line-height:var( --e-global-typography-4e38a26-line-height );letter-spacing:var( --e-global-typography-4e38a26-letter-spacing );word-spacing:var( --e-global-typography-4e38a26-word-spacing );}}\/* Start custom CSS for shortcode, class: .elementor-element-006bd42 *\/.fan_percentage_val {\n    padding-top: 10px;\n}\/* End custom CSS *\/<\/style>\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"3009\" class=\"elementor elementor-3009 elementor-2419\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-d04512f e-flex e-con-boxed e-con e-parent\" data-id=\"d04512f\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9e9cd86 elementor-widget elementor-widget-heading\" data-id=\"9e9cd86\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Carbon<i>Active<\/i> configurator for fans &amp; filters<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-006bd42 elementor-widget elementor-widget-shortcode\" data-id=\"006bd42\" data-element_type=\"widget\" data-e-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\">\t<div class=\"configurator-container\">\n        <div class=\"configurator-form\" id=\"configurator-container\">\n            <form id=\"configurator-form\">\n                <div class=\"form-group\">\n                    <label for=\"room_size\">How big is your room? (Cubic meters m\u00b3)<\/label>\n                    <input type=\"number\" name=\"room_size\" id=\"room_size\" step=\"any\" min=\"0\" required placeholder=\"e.g. 50\">\n                <\/div>\n                <div class=\"form-group range-wrap\">\n                    <label for=\"air_change\">How many air changes per hour?\n                        <br><small>We recommend 30-60 air changes per hour<\/small>\n                    <\/label>\n                    <input type=\"range\" name=\"air_change\" id=\"air_change\" min=\"1\" max=\"120\" value=\"30\">\n                    <span class=\"range-value\" id=\"air_change_val\">30<\/span>\n                <\/div>\n                <div class=\"form-group range-wrap\">\n                    <label for=\"fan_percentage\">At what percentage do you want the fan to run?\n                        <br><small>We recommend 80%. The lower the percentage, the quieter & more reserve available...<\/small>\n                    <\/label>\n                    <input type=\"range\" name=\"fan_percentage\" id=\"fan_percentage\" min=\"1\" max=\"100\" value=\"80\">\n                    <span class=\"range-value\" id=\"fan_percentage_val\">80%<\/span>\n                <\/div>\n                <div class=\"form-group\">\n                    <label>Do you place special emphasis on quiet operation?<\/label>\n                    <div class=\"yes-no-group\">\n                        <input type=\"radio\" name=\"quiet_operation\" value=\"yes\" id=\"quiet_yes\" required>\n                        <label for=\"quiet_yes\" class=\"toggle-label\">Yes<\/label>\n                        <input type=\"radio\" name=\"quiet_operation\" value=\"no\" id=\"quiet_no\">\n                        <label for=\"quiet_no\" class=\"toggle-label\">No<\/label>\n                    <\/div>\n                <\/div>\n                <input type=\"submit\" value=\"Configure\">\n            <\/form>\n            <div class=\"spinner\" id=\"spinner\"><\/div>\n            <div id=\"configurator-result\"><\/div>\n        <\/div>\n    <\/div>\n\n    <script>\n    document.addEventListener('DOMContentLoaded', function(){\n        const form = document.getElementById('configurator-form');\n        const spinner = document.getElementById('spinner');\n        const resultContainer = document.getElementById('configurator-result');\n\n        form.addEventListener('submit', function(e) {\n            e.preventDefault();\n            form.style.display = 'none';\n            spinner.style.display = 'block';\n\n            const formData = new FormData(form);\n            formData.append('action', 'process_configurator_en');\n\n            fetch('https:\/\/carbonactive.com\/wp-admin\/admin-ajax.php', {\n                method: 'POST',\n                body: formData\n            })\n            .then(response => response.text())\n            .then(data => {\n                setTimeout(function(){\n                    spinner.style.display = 'none';\n                    resultContainer.innerHTML = data;\n                    initSlider();\n                }, 2000);\n            })\n            .catch(error => {\n                spinner.style.display = 'none';\n                resultContainer.innerHTML = '<span class=\"error-message\">Error processing the request.<\/span>';\n                console.error('Error:', error);\n            });\n        });\n\n        function updateSliderValue(slider, output, isPercentage = false) {\n            const min = slider.min;\n            const max = slider.max;\n            const val = slider.value;\n            output.innerText = val + (isPercentage ? '%' : '');\n            const percent = (val - min) \/ (max - min);\n            const sliderWidth = slider.offsetWidth;\n            const thumbWidth = 22;\n            const bubblePosition = percent * (sliderWidth - thumbWidth) + (thumbWidth \/ 2);\n            output.style.left = bubblePosition + 'px';\n        }\n        const airChangeSlider = document.getElementById('air_change');\n        const airChangeVal    = document.getElementById('air_change_val');\n        const fanSlider       = document.getElementById('fan_percentage');\n        const fanVal          = document.getElementById('fan_percentage_val');\n\n        updateSliderValue(airChangeSlider, airChangeVal, false);\n        updateSliderValue(fanSlider, fanVal, true);\n\n        airChangeSlider.addEventListener('input', function() {\n            updateSliderValue(airChangeSlider, airChangeVal, false);\n        });\n        fanSlider.addEventListener('input', function() {\n            updateSliderValue(fanSlider, fanVal, true);\n        });\n    });\n    <\/script>\n    <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d732036 e-con-full e-flex e-con e-child\" data-id=\"d732036\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-1382e48 elementor-widget elementor-widget-heading\" data-id=\"1382e48\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h3 class=\"elementor-heading-title elementor-size-default\">Are you unsure or do you have any questions?<\/h3>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-09c9255 elementor-align-center elementor-widget elementor-widget-button\" data-id=\"09c9255\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"button.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div class=\"elementor-button-wrapper\">\n\t\t\t\t\t<a class=\"elementor-button elementor-button-link elementor-size-sm\" href=\"https:\/\/meetings-eu1.hubspot.com\/lminks?uuid=9bfc1ef3-0c73-4662-a336-6992acd628ca\" target=\"_blank\" rel=\"noopener\">\n\t\t\t\t\t\t<span class=\"elementor-button-content-wrapper\">\n\t\t\t\t\t\t\t\t\t<span class=\"elementor-button-text\">Book a meeting<\/span>\n\t\t\t\t\t<\/span>\n\t\t\t\t\t<\/a>\n\t\t\t\t<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>CarbonActive configurator for fans &amp; filters Are you unsure or do you have any questions? Book a meeting<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"content-type":"","footnotes":""},"class_list":["post-3009","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/pages\/3009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/comments?post=3009"}],"version-history":[{"count":10,"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/pages\/3009\/revisions"}],"predecessor-version":[{"id":4685,"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/pages\/3009\/revisions\/4685"}],"wp:attachment":[{"href":"https:\/\/carbonactive.com\/en\/wp-json\/wp\/v2\/media?parent=3009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}