Digital Tile Adhesive Selector | White Sand<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <style>\r\n \/* Clean, professional typography *\/\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700&display=swap');\r\n body { font-family: 'Inter', sans-serif; }\r\n \r\n \/* Smooth animation for the result card *\/\r\n .fade-in { animation: fadeIn 0.4s ease-in-out forwards; }\r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateY(10px); }\r\n to { opacity: 1; transform: translateY(0); }\r\n }\r\n \r\n \/* Fixed clipping issue with robust height and centering *\/\r\n select {\r\n appearance: none;\r\n background-image: url(\"data:image\/svg+xml,%3csvg xmlns='http:\/\/www.w3.org\/2000\/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'\/%3e%3c\/svg%3e\");\r\n background-position: right 0.75rem center;\r\n background-repeat: no-repeat;\r\n background-size: 1rem 1rem;\r\n height: 42px; \/* Increased height for better visibility *\/\r\n display: flex;\r\n align-items: center;\r\n }\r\n select:disabled {\r\n background-color: #f9fafb;\r\n color: #9ca3af;\r\n cursor: not-allowed;\r\n border-color: #e5e7eb;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-gray-100 min-h-screen flex items-stretch md:items-center justify-center p-0 md:p-6 lg:p-10\">\r\n\r\n \r\n <div class=\"w-full max-w-[100vw] md:max-w-[95%] lg:max-w-[1100px] xl:max-w-[1200px] bg-white md:rounded-2xl md:shadow-2xl overflow-hidden flex flex-col md:flex-row md:min-h-[550px]\">\r\n\r\n \r\n <div class=\"w-full md:w-[45%] p-6 sm:p-10 lg:p-14 space-y-6 flex flex-col justify-center\">\r\n <div>\r\n <h2 class=\"text-2xl sm:text-3xl font-extrabold text-gray-900 mb-2 tracking-tight\">Adhesive Selector<\/h2>\r\n <p class=\"text-gray-500 text-sm sm:text-base\">Find the perfect White Sand product in seconds.<\/p>\r\n <\/div>\r\n\r\n <form class=\"grid grid-cols-1 sm:grid-cols-2 md:grid-cols-1 gap-4\" id=\"selectorForm\" onsubmit=\"event.preventDefault();\">\r\n \r\n <div class=\"sm:col-span-2 md:col-span-1\">\r\n <label class=\"block text-[11px] font-bold text-gray-400 mb-1.5 uppercase tracking-wider\">1. Type of Tile<\/label>\r\n <select id=\"tileType\" class=\"w-full border border-gray-300 rounded-lg px-4 text-gray-700 focus:ring-1 focus:ring-red-600 focus:border-red-600 transition-all shadow-sm cursor-pointer text-sm\">\r\n <option value=\"\">Select Tile Type...<\/option>\r\n <option value=\"Ceramic\">Ceramic<\/option>\r\n <option value=\"Porcelain\">Porcelain<\/option>\r\n <option value=\"Natural Stone\">Natural Stone<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"sm:col-span-1 md:col-span-1\">\r\n <label class=\"block text-[11px] font-bold text-gray-400 mb-1.5 uppercase tracking-wider\">2. Application Area<\/label>\r\n <select id=\"application\" class=\"w-full border border-gray-300 rounded-lg px-4 text-gray-700 focus:ring-1 focus:ring-red-600 focus:border-red-600 transition-all shadow-sm text-sm\" disabled>\r\n <option value=\"\">Select Application...<\/option>\r\n <option value=\"Floors\">Floors<\/option>\r\n <option value=\"Walls\">Walls<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"sm:col-span-1 md:col-span-1\">\r\n <label class=\"block text-[11px] font-bold text-gray-400 mb-1.5 uppercase tracking-wider\">3. Tile Size (cm\u00b2)<\/label>\r\n <select id=\"tileSize\" class=\"w-full border border-gray-300 rounded-lg px-4 text-gray-700 focus:ring-1 focus:ring-red-600 focus:border-red-600 transition-all shadow-sm text-sm\" disabled>\r\n <option value=\"\">Select Tile Size...<\/option>\r\n <option value=\"1600\">Up to 1600 cm\u00b2<\/option>\r\n <option value=\"3600\">Up to 3600 cm\u00b2<\/option>\r\n <option value=\"5400\">Up to 5400 cm\u00b2<\/option>\r\n <option value=\"7200\">Up to 7200 cm\u00b2<\/option>\r\n <option value=\"8000\">Up to 8000 cm\u00b2<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"sm:col-span-1 md:col-span-1\">\r\n <label class=\"block text-[11px] font-bold text-gray-400 mb-1.5 uppercase tracking-wider\">4. Substrate \/ Surface<\/label>\r\n <select id=\"substrate\" class=\"w-full border border-gray-300 rounded-lg px-4 text-gray-700 focus:ring-1 focus:ring-red-600 focus:border-red-600 transition-all shadow-sm text-sm\" disabled>\r\n <option value=\"\">Select Substrate...<\/option>\r\n <option value=\"Concrete\">Concrete<\/option>\r\n <option value=\"Cement-based Plaster\">Cement-based Plaster<\/option>\r\n <option value=\"Non-Porous Surfaces\">Non-Porous Surfaces<\/option>\r\n <option value=\"Underfloor Heating\">Underfloor Heating<\/option>\r\n <option value=\"Existing Ceramic Tiles\">Existing Ceramic Tiles<\/option>\r\n <option value=\"Wet\/Submerged Areas\">Wet\/Submerged Areas<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"sm:col-span-1 md:col-span-1\">\r\n <label class=\"block text-[11px] font-bold text-gray-400 mb-1.5 uppercase tracking-wider\">5. Environment<\/label>\r\n <select id=\"environment\" class=\"w-full border border-gray-300 rounded-lg px-4 text-gray-700 focus:ring-1 focus:ring-red-600 focus:border-red-600 transition-all shadow-sm text-sm\" disabled>\r\n <option value=\"\">Select Environment...<\/option>\r\n <option value=\"Indoor\">Indoor<\/option>\r\n <option value=\"Outdoor\">Outdoor<\/option>\r\n <\/select>\r\n <\/div>\r\n\r\n \r\n <div class=\"sm:col-span-2 md:col-span-1 pt-2\">\r\n <button type=\"button\" id=\"resetBtn\" class=\"w-full px-6 py-3 border border-gray-200 shadow-sm text-[11px] font-bold rounded-lg text-gray-500 bg-white hover:bg-gray-50 focus:outline-none focus:ring-1 focus:ring-red-600 transition-all uppercase tracking-widest\">\r\n Reset Selections\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n\r\n \r\n <div class=\"w-full md:w-[55%] bg-slate-50 border-t md:border-t-0 md:border-l border-gray-100 p-8 sm:p-12 lg:p-16 flex flex-col justify-center items-center text-center relative min-h-[450px]\">\r\n\r\n \r\n <div id=\"placeholderState\" class=\"flex flex-col items-center opacity-100 transition-opacity duration-300 max-w-sm\">\r\n <div class=\"w-16 h-16 bg-white rounded-2xl flex items-center justify-center mb-5 shadow-lg border border-gray-100\">\r\n <svg class=\"w-8 h-8 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01\"><\/path><\/svg>\r\n <\/div>\r\n <h3 class=\"text-xl font-bold text-gray-800 mb-2\">Recommendation Pending<\/h3>\r\n <p class=\"text-gray-400 text-sm leading-relaxed\">Complete all selections on the left to discover the ideal adhesive.<\/p>\r\n <\/div>\r\n\r\n \r\n <div id=\"resultState\" class=\"hidden flex flex-col items-center w-full fade-in\">\r\n <div class=\"inline-flex items-center space-x-2 bg-red-600 text-white text-[10px] font-bold px-4 py-1.5 rounded-full uppercase tracking-widest mb-6 shadow-md\">\r\n <svg class=\"w-2.5 h-2.5\" fill=\"currentColor\" viewBox=\"0 0 20 20\"><path d=\"M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z\"><\/path><\/svg>\r\n <span>Recommended Match<\/span>\r\n <\/div>\r\n\r\n \r\n <div class=\"bg-white p-6 rounded-[2rem] shadow-xl border border-gray-100 mb-6 w-full max-w-[280px] lg:max-w-[320px] aspect-square flex justify-center items-center overflow-hidden mx-auto\">\r\n <img decoding=\"async\" id=\"resImage\" src=\"\" alt=\"Recommended Product\" class=\"max-h-full max-w-full object-contain drop-shadow-2xl block mx-auto transition-transform duration-500 hover:scale-105\">\r\n <\/div>\r\n\r\n <h3 id=\"resTitle\" class=\"text-xl sm:text-2xl lg:text-3xl font-black text-gray-900 mb-2 leading-tight uppercase\">Product Name<\/h3>\r\n <p id=\"resDesc\" class=\"text-gray-500 mb-8 text-xs lg:text-sm max-w-[300px] lg:max-w-[400px] leading-relaxed mx-auto\">Recommendation text.<\/p>\r\n\r\n \r\n <a id=\"resLink\" href=\"#\" target=\"_blank\" class=\"w-full max-w-[220px] inline-flex justify-center items-center px-8 py-4 border border-transparent text-sm font-bold rounded-xl text-white bg-red-600 hover:bg-red-700 shadow-xl shadow-red-100 transition-all transform hover:-translate-y-1 active:scale-95\">\r\n Product Details\r\n <svg class=\"ml-2 w-4 h-4\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M14 5l7 7m0 0l-7 7m7-7H3\"><\/path><\/svg>\r\n <\/a>\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n const products = {\r\n super: { \r\n title: 'SUPER WHITE SAND', \r\n desc: 'The professional choice for standard ceramic installations on stable substrates.', \r\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-21.jpg', \r\n link: 'https:\/\/www.whitesand.sa\/product\/super-white-sand\/' \r\n },\r\n premium: { \r\n title: 'WHITE SAND PREMIUM FIX', \r\n desc: 'Superior performance for porcelain, marble, and natural stone in challenging environments.', \r\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-24.jpg', \r\n link: 'https:\/\/www.whitesand.sa\/product\/premium-fix\/' \r\n },\r\n pool: { \r\n title: 'POOL WHITE SAND', \r\n desc: 'Specially formulated for permanent immersion in swimming pools and wet areas.', \r\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/Untitled-design-23.jpg', \r\n link: 'https:\/\/www.whitesand.sa\/product\/pool-white-sand\/' \r\n },\r\n porcelain: { \r\n title: 'PORCELAIN WHITE SAND', \r\n desc: 'High-strength adhesive designed specifically for non-porous porcelain and stone tiles.', \r\n img: 'https:\/\/www.whitesand.sa\/wp-content\/uploads\/2026\/01\/PORCELAIN.png', \r\n link: 'https:\/\/www.whitesand.sa\/product\/porcelain-white-sand\/' \r\n }\r\n };\r\n\r\n const selectsSequence = ['tileType', 'application', 'tileSize', 'substrate', 'environment'];\r\n\r\n selectsSequence.forEach((id, index) => {\r\n document.getElementById(id).addEventListener('change', (e) => {\r\n if (index < selectsSequence.length - 1 && e.target.value) {\r\n const nextId = selectsSequence[index + 1];\r\n document.getElementById(nextId).disabled = false;\r\n }\r\n for (let i = index + 1; i < selectsSequence.length; i++) {\r\n if (i > index + 1 || !e.target.value) {\r\n const futureId = selectsSequence[i];\r\n document.getElementById(futureId).value = \"\";\r\n document.getElementById(futureId).disabled = true;\r\n }\r\n }\r\n calculateResult();\r\n });\r\n });\r\n\r\n function calculateResult() {\r\n const type = document.getElementById('tileType').value;\r\n const app = document.getElementById('application').value;\r\n const size = document.getElementById('tileSize').value;\r\n const sub = document.getElementById('substrate').value;\r\n const env = document.getElementById('environment').value;\r\n\r\n if (!type || !app || !size || !env || !sub) {\r\n document.getElementById('resultState').classList.remove('flex');\r\n document.getElementById('resultState').classList.add('hidden');\r\n document.getElementById('placeholderState').classList.add('flex');\r\n document.getElementById('placeholderState').classList.remove('hidden');\r\n return;\r\n }\r\n\r\n let result = products.premium;\r\n\r\n if (type === 'Ceramic') {\r\n if (sub === 'Concrete' && env === 'Indoor') result = products.super;\r\n else if (sub === 'Cement-based Plaster' && env === 'Indoor') result = products.super;\r\n else if (sub === 'Wet\/Submerged Areas') result = products.pool;\r\n else if (sub === 'Concrete' && env === 'Outdoor') result = products.porcelain;\r\n else if (sub === 'Cement-based Plaster' && env === 'Outdoor') result = products.porcelain;\r\n } else {\r\n if (env === 'Indoor' && (sub === 'Concrete' || sub === 'Cement-based Plaster')) result = products.porcelain;\r\n else if (env === 'Indoor' && sub === 'Wet\/Submerged Areas') result = products.pool;\r\n else result = products.premium;\r\n }\r\n\r\n document.getElementById('placeholderState').classList.add('hidden');\r\n document.getElementById('placeholderState').classList.remove('flex');\r\n const resultState = document.getElementById('resultState');\r\n resultState.classList.remove('hidden');\r\n resultState.classList.add('flex');\r\n \r\n document.getElementById('resTitle').innerText = result.title;\r\n document.getElementById('resDesc').innerText = result.desc;\r\n document.getElementById('resImage').src = result.img;\r\n document.getElementById('resLink').href = result.link;\r\n }\r\n\r\n document.getElementById('resetBtn').addEventListener('click', () => {\r\n selectsSequence.forEach((id, index) => {\r\n const selectEl = document.getElementById(id);\r\n selectEl.value = \"\";\r\n selectEl.disabled = index !== 0;\r\n });\r\n document.getElementById('resultState').classList.add('hidden');\r\n document.getElementById('resultState').classList.remove('flex');\r\n document.getElementById('placeholderState').classList.remove('hidden');\r\n document.getElementById('placeholderState').classList.add('flex');\r\n });\r\n <\/script>\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t <\/div>\r\n <\/div>\r\n \t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Please select the fields in the below boxes in order to see which product best answers your needs. Digital Tile Adhesive Selector | White Sand Adhesive Selector Find the perfect White Sand product in seconds. 1. Type of Tile Select Tile Type…CeramicPorcelainNatural Stone 2. Application Area Select Application…FloorsWalls 3. Tile Size (cm\u00b2) Select Tile Size…Up […]<\/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,"footnotes":""},"class_list":["post-6772","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/comments?post=6772"}],"version-history":[{"count":48,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772\/revisions"}],"predecessor-version":[{"id":7955,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6772\/revisions\/7955"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}