{"id":3009,"date":"2025-02-26T13:38:46","date_gmt":"2025-02-26T12:38:46","guid":{"rendered":"https:\/\/carbonactive.weiss-webdesign.de\/configurator-test\/"},"modified":"2025-04-24T13:53:06","modified_gmt":"2025-04-24T11:53:06","slug":"configurator","status":"publish","type":"page","link":"https:\/\/carbonactive.weiss-webdesign.de\/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\">\n<style>\n\/* ===============  Desktop basis as before  =============== *\/\n\n\/* Container for the configurator *\/\n.configurator-container {\n    max-width: 1024px;\n    margin: 0 auto;\n    font-family: Arial, sans-serif;\n}\n\nh3 {\n    font-size: 20px;\n}\n\n\/* Form layout *\/\n.configurator-form {\n    background: #151821;\n    padding: 20px;\n    border-radius: 8px;\n    position: relative;\n    color: #D8D8D8;\n}\n.configurator-form label {\n    display: block;\n    margin-bottom: 5px;\n    color: #ffffff;\n    font-weight: bold;\n}\n.range-wrap {\n    position: relative;\n    margin-bottom: 30px;\n}\n.range-value {\n    position: absolute;\n    top: 60px;\n    left: 0;\n    color: #ffffff;\n    font-size: 12px;\n    font-weight: bold;\n    pointer-events: none;\n    transform: translateX(-50%);\n}\n.configurator-form input[type=\"range\"] {\n    width: 100%;\n    background-color: #151821;\n    border: 1px solid #D8D8D8;\n    border-radius: 4px;\n    margin: 5px 0 0 0;\n    padding: 0;\n}\n.configurator-form input[type=\"range\"]::-webkit-slider-thumb {\n    background: #2D69FF;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    -webkit-appearance: none;\n    margin-top: -7px;\n}\n.configurator-form input[type=\"range\"]::-moz-range-thumb {\n    background: #2D69FF;\n    border-radius: 50%;\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n}\n.yes-no-group {\n    display: flex;\n    align-items: center;\n    gap: 10px;\n    margin-bottom: 20px;\n}\n.configurator-form input[type=\"submit\"] {\n    background: #2D69FF;\n    color: #ffffff;\n    border: none;\n    padding: 10px;\n    border-radius: 4px;\n    cursor: pointer;\n    margin-top: 10px;\n}\n.configurator-form input[type=\"submit\"]:hover {\n    background: #ffffff;\n    color: #2D69FF;\n    border: none;\n    padding: 10px;\n    border-radius: 4px;\n    cursor: pointer;\n    margin-top: 10px;\n}\n\n\/* Spinner animation *\/\n.spinner {\n    border: 4px solid rgba(255, 255, 255, 0.3);\n    border-top: 4px solid #2D69FF;\n    border-radius: 50%;\n    width: 40px;\n    height: 40px;\n    animation: spin 1s linear infinite;\n    margin: 20px auto;\n    display: none;\n}\n@keyframes spin {\n    0% { transform: rotate(0deg); }\n    100% { transform: rotate(360deg); }\n}\n\n\/* Result container *\/\n#configurator-result {\n    margin-top: 20px;\n}\n\n\/* Layout for the three main variants (slider) *\/\n.configurator-result-layout {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n}\n.variant-box {\n    flex: 1;\n    margin: 0 10px;\n}\n.variant-box img {\n    max-width: 150px;\n    max-height: 106px;\n    display: block;\n    margin-bottom: 10px;\n}\n.variant-box .details {\n    font-size: 14px;\n    margin-bottom: 10px;\n    line-height: 1.4;\n}\n.variant-box .price {\n    font-weight: bold;\n    display: block;\n    margin-top: 10px;\n}\n.variant-box a.variant-link {\n    display: inline-block;\n    margin-top: 10px;\n    background: #2D69FF;\n    color: #fff;\n    padding: 8px 12px;\n    border-radius: 4px;\n    text-decoration: none;\n}\n.variant-box a.variant-link:hover {\n    background: #fff;\n    color: #2d69ff;\n}\n\n\/* Reload button *\/\n.reload-button {\n    display: inline-block;\n    margin-top: 20px;\n    background: #2d69ff;\n    color: #ffffff !important;\n    padding: 8px 12px;\n    border-radius: 4px;\n    text-decoration: none;\n}\n.reload-button:hover {\n    background: #ffffff;\n    color: #2d69ff !important;\n}\n\n\/* Section for AKF boxes *\/\n.fan-akf-wrapper {\n    display: flex;\n    align-items: flex-start;\n    gap: 20px;\n    margin-top: 40px;\n}\n#configurator-result .variant-slider .slide-container .variant-slide .price {\n    margin-bottom: 20px;\n    margin-top: 20px;\n}\n\n\/* Two columns for the AKF variants (Granulate \/ Standard) *\/\n.akf-two-col {\n  display: flex;\n  flex-wrap: nowrap;\n  justify-content: center;\n  gap: 20px;\n  width: 100%;\n  box-sizing: border-box;\n}\n\n.akf-col {\n  flex: 0 0 calc(50% - 10px);\n  background: #333;\n  border-radius: 6px;\n  padding: 10px;\n  border: 1px solid #444;\n  color: #D8D8D8;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n\/* Heading in each column *\/\n.akf-col-title {\n    font-weight: bold;\n    color: #fff;\n    margin-bottom: 5px;\n}\n\n\/* Combo items (the individual AKF combinations) *\/\n.akf-col .combo-items {\n    display: flex;\n    flex-wrap: nowrap;\n    gap: 20px;\n    justify-content: center;\n    padding: 40px;\n}\n\n\/* Each individual item takes 50% minus half the gap *\/\n.akf-col .combo-item {\n    background: #444;\n    border-radius: 6px;\n    padding: 10px;\n    padding-bottom: 20px;\n    text-align: center;\n    flex: 0 0 calc(50% - 10px);\n    box-sizing: border-box;\n}\n\n\/* Extra spacing *\/\n#configuratorresult .combo-items > div {\n    padding-bottom: 30px;\n}\n\n\/* AKF image itself *\/\n.combo-item img {\n  width: 100px;\n  height: 100px;\n  object-fit: contain;\n  margin-bottom: 8px;\n  border-radius: 4px;\n}\n\n\/* Slider-specific CSS *\/\n.variant-slider {\n    position: relative;\n    margin-top: 20px;\n}\n.variant-slide {\n    display: none;\n    background: #2a2a2a;\n    border-radius: 6px;\n    padding: 20px;\n    margin: 0 0 20px 0;\n    text-align: center;\n}\n.variant-slide.active {\n    display: block;\n}\n.variant-slide h3 {\n    font-size: 20px;\n}\n\n\/* Slider buttons *\/\n.slider-buttons {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    margin-bottom: 10px;\n}\n.slide-nav {\n    background: #2D69FF;\n    color: #fff;\n    border: none;\n    padding: 8px 12px;\n    border-radius: 4px !important;\n    cursor: pointer;\n    margin: 0 5px 10px 5px;\n    transition: background 0.3s, color 0.3s;\n}\n.slide-nav:hover {\n    background: #ffffff;\n    color: #2d69ff;\n}\n\/* Keep button active when the slide is active *\/\n.slide-nav.active {\n    background: #ffffff;\n    color: #2d69ff;\n    font-weight: bold;\n}\n\n\/* Upsell variants *\/\n.upsell-row {\n    display: flex;\n    flex-wrap: wrap;\n    gap: 20px;\n    align-items: flex-start;\n    justify-content: flex-start;\n}\n.upsell-row .variant-box {\n    flex: 1 1 30%;\n    min-width: 200px;\n    max-width: 300px; \n    margin: 0;\n}\n\n    .ca-button {\n        margin-bottom: 20px;\n    }\n    \n\/* CarbonActive-styled buttons *\/\na.ca-button {\n    background: #2D69FF;\n    color: #ffffff;\n    border: none;\n    padding: 10px;\n    border-radius: 4px;\n    cursor: pointer;\n    text-decoration: none;\n    margin-top: 10px;\n    margin-bottom: 20px;\n    transition: background 0.3s, color 0.3s;\n}\na.ca-button:hover {\n    background: #ffffff;\n    color: #2D69FF;\n}\n\n\/* Demo only, in case you need a c-button somewhere *\/\n.c-button {\n    margin: 100px;\n}\n\n\n\/* ===============  Responsive adjustments  =============== *\/\n@media (max-width: 768px) {\n  \n  \/* The .slider-buttons stack vertically instead of side-by-side *\/\n  .slider-buttons {\n    flex-direction: column;\n    gap: 10px;\n  }\n  .slide-nav {\n    width: 100%;\n  }\n\n  \/* The columns for Granulate\/Standard stack vertically *\/\n  .akf-two-col {\n    flex-wrap: wrap;\n  }\n  .akf-col {\n    flex: 0 0 100%;\n    margin-bottom: 20px;\n  }\n\n  \/* Combo items in one column also stack vertically *\/\n  .akf-col .combo-items {\n    flex-wrap: wrap;\n    justify-content: flex-start;\n  }\n  .akf-col .combo-item {\n    flex: 0 0 100%;\n    min-width: auto;\n  }\n\n  \/* If you want the .variant-boxes in the slides to stack vertically *\/\n  .configurator-result-layout {\n    flex-direction: column;\n  }\n.upsell-row .variant-box {\n    flex: 1 1 100%;\n    max-width: 100%;\n  }\n}\n\n\n<\/style>\n<div class=\"configurator-container\">\n        <div class=\"configurator-form\" id=\"configurator-container\">\n            <form id=\"configurator-form\">\n                <div>\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>\n                <\/div>\n                <br>\n                <div class=\"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=\"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>\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\">Yes<\/label>\n                        <input type=\"radio\" name=\"quiet_operation\" value=\"no\" id=\"quiet_no\">\n                        <label for=\"quiet_no\">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.weiss-webdesign.de\/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                    \/\/ Initialize slider\n                    initSlider();\n                }, 2000);\n            })\n            .catch(error => {\n                spinner.style.display = 'none';\n                resultContainer.innerHTML = '<span style=\"color:#D8D8D8;\">Error processing the request.<\/span>';\n                console.error('Error:', error);\n            });\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 bubblePosition = percent * (slider.offsetWidth - 20) + 10;\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.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/pages\/3009","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/comments?post=3009"}],"version-history":[{"count":10,"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/pages\/3009\/revisions"}],"predecessor-version":[{"id":4685,"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/pages\/3009\/revisions\/4685"}],"wp:attachment":[{"href":"https:\/\/carbonactive.weiss-webdesign.de\/en\/wp-json\/wp\/v2\/media?parent=3009"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}