{"id":7702,"date":"2023-05-11T18:01:03","date_gmt":"2023-05-11T15:01:03","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/fandecks\/exterior-colour-card\/"},"modified":"2023-07-21T13:30:28","modified_gmt":"2023-07-21T10:30:28","slug":"exterior-colour-card","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/exterior-colour-card\/","title":{"rendered":"Exterior Colour Card"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7702\" class=\"elementor elementor-7702 elementor-2347\" data-elementor-post-type=\"page\">\n\t\t\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-81027f4 e-con-full e-flex e-con e-parent\" data-id=\"81027f4\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9b0dab6 elementor-widget elementor-widget-image\" data-id=\"9b0dab6\" data-element_type=\"widget\" data-widget_type=\"image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t\t\t\t\t\t\t<img decoding=\"async\" width=\"154\" height=\"154\" src=\"https:\/\/www.berling.gr\/wp-content\/uploads\/exterior_colourcard.jpg\" class=\"attachment-medium_large size-medium_large wp-image-1939\" alt=\"\" srcset=\"https:\/\/www.berling.gr\/wp-content\/uploads\/exterior_colourcard.jpg 154w, https:\/\/www.berling.gr\/wp-content\/uploads\/exterior_colourcard-100x100.jpg 100w, https:\/\/www.berling.gr\/wp-content\/uploads\/exterior_colourcard-150x150.jpg 150w\" sizes=\"(max-width: 154px) 100vw, 154px\" \/>\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<div class=\"elementor-element elementor-element-c072615 elementor-widget elementor-widget-heading\" data-id=\"c072615\" data-element_type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Exterior Colour Card<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-f49918d e-flex e-con-boxed e-con e-parent\" data-id=\"f49918d\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-c83377e elementor-widget elementor-widget-text-editor\" data-id=\"c83377e\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p>Discover the new color collection of <strong>BERLING &#8211; Exterior Colourcard<\/strong>, a sophisticated color chart that offers shades ideal for exterior surfaces and many other applications, interior and exterior. With 136 different shades, you have the opportunity to choose the ones that reflect your personal taste, harmonize with the style of your building and fit harmoniously with your environment.<\/p>\n<p>The shades of this color chart are specifically designed to maintain their original vitality for longer, withstanding <strong>UV<\/strong>-solar radiation and adverse weather conditions. By choosing shades from this color chart for your exterior surfaces, you can enjoy the color you have chosen, unchanged for longer!<\/p>\n<p>Choose the <strong>BERLING &#8211; Exterior Colourcard<\/strong> for unique and durable surfaces that will maintain their aesthetics even in adverse weather conditions.<\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-26cfba7 elementor-widget elementor-widget-shortcode\" data-id=\"26cfba7\" data-element_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          <script>\/\/ Function to create color tiles\r\nfunction createColorTiles(colors) {\r\n  var container = document.getElementById('color-container');\r\n\r\n  for (var i = 0; i < colors.length; i++) {\r\n    var tile = document.createElement('div');\r\n    tile.className = 'color-tile';\r\n    tile.style.backgroundColor = colors[i].hex;\r\n    tile.title = colors[i].name;\r\n\r\n    var icon = document.createElement('i');\r\n    icon.className = 'material-icons';\r\n    icon.textContent = colors[i].icon;\r\n\r\n    var label = document.createElement('div');\r\n    label.className = 'color-label';\r\n    label.textContent = colors[i].name;\r\n\r\n    \/\/ Dynamically adjust label color based on luminance\r\n    var bgColor = colors[i].hex;\r\n    var luminance = 0.2126 * parseInt(bgColor.substr(1, 2), 16) +\r\n                    0.7152 * parseInt(bgColor.substr(3, 2), 16) +\r\n                    0.0722 * parseInt(bgColor.substr(5, 2), 16);\r\n\r\n    if (luminance > 128) {\r\n      label.style.color = '#000000'; \/\/ Black\r\n    } else {\r\n      label.style.color = '#FFFFFF'; \/\/ White\r\n    }\r\n    \r\n    tile.appendChild(icon);\r\n    tile.appendChild(label);\r\n    container.appendChild(tile);\r\n\r\n    tile.addEventListener('click', function (event) {\r\n      createColorPreview(event.target.style.backgroundColor, event.target.title);\r\n    });\r\n\r\n    label.addEventListener('click', function (event) {\r\n      createColorPreview(event.target.parentNode.style.backgroundColor, event.target.parentNode.title);\r\n    });\r\n  }\r\n}\r\n\r\n\/\/ Function to create color preview below the clicked item\r\nfunction createColorPreview(color, name) {\r\n  \/\/ Remove any existing color preview\r\n  var existingPreview = document.querySelector('.color-preview');\r\n  if (existingPreview) {\r\n    existingPreview.remove();\r\n  }\r\n\r\n  \/\/ Create a new color preview\r\n  var colorPreview = document.createElement('div');\r\n  colorPreview.className = 'color-preview';\r\n  colorPreview.style.backgroundColor = color;\r\n\r\n  var colorName = document.createElement('span');\r\n  \r\n  \r\n    \/\/ Dynamically adjust label color based on luminance\r\n  var bgColor =  rgbToHex(color);\r\n  console.log(bgColor);\r\n  var luminance = 0.2126 * parseInt(bgColor.substr(1, 2), 16) +\r\n                  0.7152 * parseInt(bgColor.substr(3, 2), 16) +\r\n                  0.0722 * parseInt(bgColor.substr(5, 2), 16);\r\n\r\nconsole.log(luminance);\r\n  if (luminance > 128) {\r\n    colorName.style.color = '#000000'; \/\/ Black\r\n  } else {\r\n    colorName.style.color = '#FFFFFF'; \/\/ White\r\n  };\r\n  \r\n  \r\n  colorName.textContent = name;\r\n  \r\n\r\n  \r\n  var closeIcon = document.createElement('i');\r\n  closeIcon.className = 'material-icons close-icon';\r\n  closeIcon.textContent = 'close';\r\n  closeIcon.addEventListener('click', function() {\r\n    colorPreview.remove();\r\n  });\r\n\r\n  colorPreview.appendChild(colorName);\r\n  colorPreview.appendChild(closeIcon);\r\n\r\n  var container = document.getElementById('color-container');\r\n  var clickedItem = event.target;\r\n\r\n  \/\/ Insert the color preview below the clicked item\r\n  container.insertBefore(colorPreview, clickedItem.nextSibling);\r\n}\r\n\r\n\r\n\/\/ Function to convert RGB color to HEX format\r\nfunction rgbToHex(rgbColor) {\r\n  var rgbValues = rgbColor.match(\/\\d+\/g);\r\n  var hexColor = '#';\r\n\r\n  for (var i = 0; i < 3; i++) {\r\n    var hexValue = parseInt(rgbValues[i]).toString(16);\r\n    hexColor += hexValue.length === 1 ? '0' + hexValue : hexValue;\r\n  }\r\n\r\n  return hexColor;\r\n}\r\n\r\n\/\/ Function to filter color tiles based on input\r\nfunction filterColors() {\r\n  var filterInput = document.getElementById('filter-input');\r\n  var filterValue = filterInput.value.toLowerCase();\r\n  var colorTiles = document.getElementsByClassName('color-tile');\r\n\r\n  for (var i = 0; i < colorTiles.length; i++) {\r\n    var tile = colorTiles[i];\r\n    var tileLabel = tile.getElementsByClassName('color-label')[0];\r\n    var tileName = tileLabel.textContent.toLowerCase();\r\n\r\n    if (tileName.includes(filterValue)) {\r\n      tile.style.display = 'inline-block';\r\n    } else {\r\n      tile.style.display = 'none';\r\n    }\r\n  }\r\n}\r\n\r\n\r\n\r\n\/\/ Function to create classification filter tiles\r\nfunction createClassificationFilterTiles() {\r\n  var classificationTiles = document.getElementsByClassName('classification-tile');\r\n\r\n  for (var i = 0; i < classificationTiles.length; i++) {\r\n    classificationTiles[i].addEventListener('click', function() {\r\n      var filterValue = this.getAttribute('data-filter');\r\n      var colorTiles = document.getElementsByClassName('color-tile');\r\n\r\n      for (var j = 0; j < colorTiles.length; j++) {\r\n        var classification = colorTiles[j].getAttribute('classification');\r\n        var tileContainer = colorTiles[j].parentElement;\r\n\r\n        if (filterValue === 'all' || classification === filterValue) {\r\n          colorTiles[j].style.display = 'inline-block';\r\n          tileContainer.style.display = 'inline-block';\r\n        } else {\r\n          colorTiles[j].style.display = 'none';\r\n          tileContainer.style.display = 'none';\r\n        }\r\n      }\r\n    });\r\n  }\r\n}\r\n\r\n\r\n\r\n\/\/ Fetch colors from remote API\r\n\/\/fetch('https:\/\/berl.link\/fandeck\/FEELDESIGN')\r\n\/\/fetch('\/jsons\/feeldesign.json', {\r\n  fetch('https:\/\/berl.link\/fandeck2\/berlext')\r\n  .then(response => response.json())\r\n  .then(data => {\r\n      createColorTiles(data.colors);\r\n      var filterInput = document.getElementById('filter-input');\r\n      filterInput.addEventListener('input', filterColors);\r\n      \r\n      \r\n      \r\n  })\r\n  .catch(error => console.error('Error:', error));\r\n\r\n<\/script>\n        <\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-989b9b6 elementor-widget elementor-widget-html\" data-id=\"989b9b6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t \n<link rel=\"stylesheet\" href=\"https:\/\/fonts.googleapis.com\/icon?family=Material+Icons\">\n  \n  \n  <div class=\"filter-container\">\n    <input type=\"text\" id=\"filter-input\" placeholder=\"Search by color code...\">\n  <\/div>\n  \n    <div id=\"classification-filter-container\">\n\n  <div id=\"color-container\"><\/div>\n\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<div data-particle_enable=\"false\" data-particle-mobile-disabled=\"false\" class=\"elementor-element elementor-element-10de701 e-flex e-con-boxed e-con e-parent\" data-id=\"10de701\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66dfd50 elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"66dfd50\" data-element_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:\/\/www.berling.gr\/en\/fandecks\/\">\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\">Return to fandecks<\/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<div class=\"elementor-element elementor-element-17ac0cb elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"17ac0cb\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><strong>Note:<\/strong><\/p>\n<p>The color samples photos may deviate from reality because of the limitations of each screen display or printing  For the full range of shades visit your nearest paint shop<\/p>\n<p>Tip 1: We recommend visiting the closest paint shop and asking for our colorcard or create a sample for you.<\/p>\n<p>Tip 2: Before painting interior or exterior surfaces we recommend asking for the specifications, surface preparation and any technical points in order to ensure great paint application results!<\/p>\n<p>Tip 3: Choose the color code you like and ask for the quantity you want.<\/p>\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>Discover the new color collection of BERLING &#8211; Exterior Colourcard, a sophisticated color chart that offers shades ideal for exterior surfaces and many other applications, interior and exterior. With 136 different shades, you have the opportunity to choose the ones that reflect your personal taste, harmonize with the style of your building and fit harmoniously [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1939,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7702","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7702","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/comments?post=7702"}],"version-history":[{"count":1,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7702\/revisions"}],"predecessor-version":[{"id":7703,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7702\/revisions\/7703"}],"up":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7014"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media\/1939"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=7702"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}