{"id":1577,"date":"2025-01-11T13:17:26","date_gmt":"2025-01-11T13:17:26","guid":{"rendered":"https:\/\/bryxagency.com\/?page_id=1577"},"modified":"2025-01-27T21:58:22","modified_gmt":"2025-01-27T21:58:22","slug":"werbemittel-aus-klemmbausteinen","status":"publish","type":"page","link":"https:\/\/bryxagency.com\/en\/werbemittel-aus-klemmbausteinen\/","title":{"rendered":"Werbemittel aus Klemmbausteinen"},"content":{"rendered":"\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t\"BRYX\t\t\t\t\t\t\t\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<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\n\n\n \n \n Preiskonfigurator<\/title>\n <style>\n body {\n display: flex;\n flex-direction: column;\n padding: 20px;\n align-items: center;\n color:#2A2A2A99;\n }\n .slider-container {\n width: 100%;\n padding: 20px 40px;\n text-align: center;\n }\n label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n output {\n font-weight: bold;\n display: block;\n margin-top: 5px;\n }\n \n .elementor-1577 .elementor-element.elementor-element-c23fe85 > .elementor-element-populated {\n box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.12);\n border-radius: 32px;\n}\n .result {\n margin-top: 20px;\n font-size: 1.2em;\n font-weight: bold;\n text-align: center;\n padding:40px;\n color: #fff;\n background-color: #007BFF;\n border-bottom-left-radius: 20px;\n border-bottom-right-radius: 20px;\n \n \n }\n .preview {\n width: 600px!important;\n height: 300px!important;\n margin: -80px 70px 0 70px;\n align-items: center;\n text-align: center;\n }\n .preview img {\n padding: 10px;\n align-items: center;\n }\n \n input[type=\"range\"] {\n -webkit-appearance: none;\n width: 100%;\n height: 8px;\n background: #ddd;\n border-radius: 5px;\n outline: none;\n opacity: 0.9;\n transition: opacity 0.2s;\n }\n \n \n\n input[type=\"range\"]::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 25px;\n height: 25px;\n border-radius: 50%;\n background: #007BFF;\n cursor: pointer;\n transition: background 0.2s;\n }\n\n input[type=\"range\"]::-webkit-slider-thumb:hover {\n background: #0056b3;\n }\n\n input[type=\"range\"]::-moz-range-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #007BFF;\n cursor: pointer;\n transition: background 0.2s;\n }\n\n input[type=\"range\"]::-moz-range-thumb:hover {\n background: #0056b3;\n }\n\n input[type=\"range\"]::-ms-thumb {\n width: 20px;\n height: 20px;\n border-radius: 50%;\n background: #007BFF;\n cursor: pointer;\n transition: background 0.2s;\n }\n\n input[type=\"range\"]:hover {\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body>\n\n <div class=\"preview\">\n <img decoding=\"async\" id=\"preview-image\" src=\"images\/model_25-75.png\" alt=\"Vorschau f\u00fcr Teileanzahl 25-75\">\n \n <\/div>\n\n <div class=\"slider-container\">\n <h1><b>BRYX Price Picker<\/b><\/h1><br>\n <label for=\"parts\">Number of pieces \/ Teileanzahl:<\/label>\n <input type=\"range\" id=\"parts\" min=\"1\" max=\"6\" step=\"1\" value=\"1\" \/>\n <output id=\"parts-output\">25 - 75<\/output>\n <\/div>\n\n <div class=\"slider-container\">\n <label for=\"quantity\">Quantity \/ Menge:<\/label>\n <input type=\"range\" id=\"quantity\" min=\"1\" max=\"6\" step=\"1\" value=\"1\" \/>\n <output id=\"quantity-output\">250<\/output>\n <\/div>\n\n <div class=\"slider-container\">\n <label for=\"delivery\">Delivery time \/ Lieferzeit:<\/label>\n <input type=\"range\" id=\"delivery\" min=\"1\" max=\"2\" step=\"1\" value=\"1\" \/>\n <output id=\"delivery-output\">Standard (12 Wochen)<\/output>\n <\/div>\n\n <div class=\"result\">\n Price range \/ Preisrange*:<br> <span id=\"price-range\">1,50 - 2,50 \u20ac<\/span>\n <\/div>\n\n <script>\n const partsSlider = document.getElementById('parts');\n const quantitySlider = document.getElementById('quantity');\n const deliverySlider = document.getElementById('delivery');\n const partsOutput = document.getElementById('parts-output');\n const quantityOutput = document.getElementById('quantity-output');\n const deliveryOutput = document.getElementById('delivery-output');\n const priceRange = document.getElementById('price-range');\n const previewImage = document.getElementById('preview-image');\n\n const partsValues = [\n \"25 - 75\",\n \"76 - 150\",\n \"151 - 250\",\n \"251 - 400\",\n \"401 - 800\",\n \"801 - 1.200\"\n ];\n\n const quantityValues = [250, 500, 1000, 2000, 5000, 10000];\n\n const deliveryValues = [\"Standard (12 Wochen)\", \"Express (8 Wochen)\"];\n\n const priceMatrix = [\n [3.50, 3.00, 1.50, 1.25, 1.00, 0.50], \/\/ 25 - 75\n [5.00, 4.50, 4.00, 3.00, 2.50, 2.00], \/\/ 76 - 150\n [12.00, 11.00, 9.00, 8.00, 6.50, 5.50], \/\/ 151 - 250\n [25.00, 23.50, 20.00, 18.00, 14.00, 12.00], \/\/ 251 - 400\n [35.00, 32.50, 28.00, 22.00, 18.00, 14.00], \/\/ 401 - 800\n [60.00, 55.00, 40.00, 35.00, 32.50, 28.00] \/\/ 801 - 1.200\n ];\n\n const previewImages = [\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-50-75.png\",\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-75-150.png\",\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-151-250-1.png\",\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-251-400.png\",\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-401-800.png\",\n \"https:\/\/bryxagency.com\/wp-content\/uploads\/2025\/01\/bryx-agency-801-1200.png\"\n ];\n\n function updateOutput() {\n const partsIndex = partsSlider.value - 1;\n const quantityIndex = quantitySlider.value - 1;\n const deliveryIndex = deliverySlider.value - 1;\n\n partsOutput.textContent = partsValues[partsIndex];\n quantityOutput.textContent = quantityValues[quantityIndex];\n deliveryOutput.textContent = deliveryValues[deliveryIndex];\n\n const basePrice = priceMatrix[partsIndex][quantityIndex];\n const expressMultiplier = deliveryIndex === 1 ? 1.4 : 1; \/\/ Express kostet 40 % mehr\n const minPrice = (basePrice * expressMultiplier).toFixed(2);\n const maxPrice = (minPrice * 2.0).toFixed(2); \/\/ Beispiel f\u00fcr eine Preisrange\n\n priceRange.textContent = `${minPrice} - ${maxPrice} \u20ac`;\n\n \/\/ Update Preview Image\n previewImage.src = previewImages[partsIndex];\n previewImage.alt = `Vorschau f\u00fcr Teileanzahl ${partsValues[partsIndex]}`;\n}\n\n\n partsSlider.addEventListener('input', updateOutput);\n quantitySlider.addEventListener('input', updateOutput);\n deliverySlider.addEventListener('input', updateOutput);\n\n \/\/ Initialer Output\n updateOutput();\n\n\n <\/script>\n<\/body>\n<\/html>\n\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<footer class=\"elementor-section elementor-top-section elementor-element elementor-element-24344225 elementor-section-content-middle elementor-section-height-min-height elementor-section-full_width elementor-section-height-default elementor-section-items-middle\" data-id=\"24344225\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{"background_background":"classic"}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-66e2308f\" data-id=\"66e2308f\" data-element_type=\"column\" data-e-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-65bf4a03 elementor-widget elementor-widget-heading\" data-id=\"65bf4a03\" 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<p class=\"elementor-heading-title elementor-size-default\">* The prices are non-binding. | Die Preise sind unverbindlich <br><br><br>\nCopyright \u00a9 2025 The BRYX Agency<\/p>\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<\/footer>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Preiskonfigurator BRYX Price Picker Number of pieces \/ Teileanzahl: 25 – 75 Quantity \/ Menge: 250 Delivery time \/ Lieferzeit: Standard (12 Wochen) Price range \/ Preisrange*: 1,50 – 2,50 \u20ac * The prices are non-binding. | Die Preise sind unverbindlich Copyright \u00a9 2025 The BRYX Agency<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-1577","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/pages\/1577","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/comments?post=1577"}],"version-history":[{"count":205,"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/pages\/1577\/revisions"}],"predecessor-version":[{"id":1805,"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/pages\/1577\/revisions\/1805"}],"wp:attachment":[{"href":"https:\/\/bryxagency.com\/en\/wp-json\/wp\/v2\/media?parent=1577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}