{"id":7713,"date":"2023-05-11T18:05:02","date_gmt":"2023-05-11T15:05:02","guid":{"rendered":"https:\/\/wp.berlingpaints.com\/fandecks\/berling-2024\/"},"modified":"2023-07-21T14:39:54","modified_gmt":"2023-07-21T11:39:54","slug":"berling-2024","status":"publish","type":"page","link":"https:\/\/www.berling.gr\/en\/fandecks\/berling-2024\/","title":{"rendered":"Berling 2024"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7713\" class=\"elementor elementor-7713 elementor-2349\" 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-a095be6 e-con-full e-flex e-con e-parent\" data-id=\"a095be6\" data-element_type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a656002 elementor-widget elementor-widget-image\" data-id=\"a656002\" 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\/berling_2024.jpg\" class=\"attachment-full size-full wp-image-1924\" alt=\"\" srcset=\"https:\/\/www.berling.gr\/wp-content\/uploads\/berling_2024.jpg 154w, https:\/\/www.berling.gr\/wp-content\/uploads\/berling_2024-100x100.jpg 100w, https:\/\/www.berling.gr\/wp-content\/uploads\/berling_2024-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-fe0e63c elementor-widget elementor-widget-heading\" data-id=\"fe0e63c\" 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\">Berling 2024<\/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-e10ebf4 e-flex e-con-boxed e-con e-parent\" data-id=\"e10ebf4\" 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-d32c4f6 elementor-widget elementor-widget-text-editor\" data-id=\"d32c4f6\" 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>This is <strong>Berling\u2019s<\/strong> large color collection which includes <strong>2024 unique shades,<\/strong> chosen by experienced designers, to offer the absolute aisthetic exeprience. The shades are divided into color groups with harmonious flow between them, so the selection of the appropriate color is an easy and pleasant process.<\/p>\n<p><strong>Berling&#8217;s<\/strong> colorcard is divided into 4 major color groups: <strong>Pastel, Bright, Vibrant<\/strong> and <strong>Dark<\/strong> shades. This division helps you quickly identify the shades that best suit your aesthetic and needs.<\/p>\n<p>Whether you are a professional architect, engineer or just a person who wants to explore the magical world of colors, <strong>Berling&#8217;s<\/strong> large color collection is the ideal tool to express your creativity and create amazing indoor and outdoor spaces.<\/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-6df1392 elementor-widget elementor-widget-shortcode\" data-id=\"6df1392\" 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\/nova2024')\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-300b230 elementor-widget elementor-widget-html\" data-id=\"300b230\" 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\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-bfa2efd e-flex e-con-boxed e-con e-parent\" data-id=\"bfa2efd\" 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-f797fe3 elementor-widget elementor-widget-global elementor-global-7219 elementor-global-2295 elementor-widget-button\" data-id=\"f797fe3\" 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-5fd6b6a elementor-widget elementor-widget-global elementor-global-7008 elementor-global-1804 elementor-widget-text-editor\" data-id=\"5fd6b6a\" 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>This is Berling\u2019s large color collection which includes 2024 unique shades, chosen by experienced designers, to offer the absolute aisthetic exeprience. The shades are divided into color groups with harmonious flow between them, so the selection of the appropriate color is an easy and pleasant process. Berling&#8217;s colorcard is divided into 4 major color groups: [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1924,"parent":7014,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-7713","page","type-page","status-publish","has-post-thumbnail","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7713","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=7713"}],"version-history":[{"count":1,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7713\/revisions"}],"predecessor-version":[{"id":7714,"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/pages\/7713\/revisions\/7714"}],"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\/1924"}],"wp:attachment":[{"href":"https:\/\/www.berling.gr\/en\/wp-json\/wp\/v2\/media?parent=7713"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}