{"id":6784,"date":"2026-02-18T21:35:56","date_gmt":"2026-02-18T21:35:56","guid":{"rendered":"https:\/\/www.whitesand.sa\/?page_id=6784"},"modified":"2026-03-28T02:59:46","modified_gmt":"2026-03-28T02:59:46","slug":"color-cards","status":"publish","type":"page","link":"https:\/\/www.whitesand.sa\/ar\/color-cards\/","title":{"rendered":"\u0643\u062a\u0627\u0644\u0648\u062c \u0627\u0644\u0623\u0644\u0648\u0627\u0646"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\n \n
\n
\r\n
\r\n \t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n White Sand - Tile Configurator<\/title>\r\n <style>\r\n :root {\r\n \/* Default Tile Colors updated to match new palette *\/\r\n --tile-fill: #E6E7E7;\r\n --tile-line: #389DBA;\r\n }\r\n\r\n \/* 1. Page Centering & Setup *\/\r\n body {\r\n margin: 0;\r\n padding: 20px;\r\n min-height: 100vh;\r\n background-color: #f4f7f6;\r\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\r\n box-sizing: border-box;\r\n color: #333;\r\n }\r\n\r\n .header {\r\n text-align: center;\r\n margin-bottom: 30px;\r\n }\r\n\r\n .header h1 {\r\n margin: 0;\r\n color: #2c3e50;\r\n font-weight: 800;\r\n letter-spacing: 1px;\r\n text-transform: uppercase;\r\n }\r\n\r\n .header p {\r\n color: #7f8c8d;\r\n margin-top: 5px;\r\n }\r\n\r\n \/* 2. Main Layout *\/\r\n .app-container {\r\n display: flex;\r\n flex-direction: row;\r\n gap: 40px;\r\n max-width: 1300px;\r\n margin: 0 auto;\r\n align-items: flex-start;\r\n }\r\n\r\n .left-panel {\r\n flex: 1;\r\n background: #ffffff;\r\n padding: 30px;\r\n border-radius: 24px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n }\r\n\r\n .right-panel {\r\n flex: 0 0 400px;\r\n background: #ffffff;\r\n padding: 30px;\r\n border-radius: 24px;\r\n box-shadow: 0 10px 30px rgba(0,0,0,0.05);\r\n position: sticky;\r\n top: 20px;\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n }\r\n\r\n \/* 3. The Grid Container *\/\r\n .grid-container {\r\n display: grid;\r\n grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));\r\n gap: 30px 20px;\r\n justify-content: center;\r\n }\r\n\r\n \/* 4. Individual Item Styling *\/\r\n .color-item {\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center;\r\n text-align: center;\r\n cursor: pointer;\r\n transition: transform 0.2s ease;\r\n }\r\n\r\n .box {\r\n width: 100px;\r\n height: 100px;\r\n margin-bottom: 10px;\r\n transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);\r\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\r\n position: relative;\r\n overflow: hidden;\r\n border-radius: 50%;\r\n border: 6px solid #e0e0e0;\r\n box-sizing: border-box;\r\n }\r\n\r\n .color-item:hover .box {\r\n transform: translateY(-5px) scale(1.05);\r\n box-shadow: 0 15px 25px rgba(0,0,0,0.1);\r\n border-color: #d0d0d0;\r\n }\r\n \r\n .color-item:hover .label {\r\n color: #000;\r\n font-weight: 800;\r\n }\r\n\r\n .copy-overlay {\r\n position: absolute;\r\n top: 0; left: 0; width: 100%; height: 100%;\r\n background-color: rgba(0,0,0,0.3);\r\n backdrop-filter: blur(2px);\r\n display: flex; flex-direction: column;\r\n justify-content: center; align-items: center;\r\n opacity: 0; transition: opacity 0.2s ease;\r\n color: white;\r\n text-shadow: 0 1px 3px rgba(0,0,0,0.6);\r\n }\r\n\r\n .color-item:hover .copy-overlay { opacity: 1; }\r\n .copy-text { font-size: 14px; font-weight: 900; margin-bottom: 4px; text-transform: uppercase; }\r\n .hex-text { font-family: monospace; font-size: 12px; font-weight: bold; background: rgba(0,0,0,0.5); padding: 4px 8px; border-radius: 8px; }\r\n .label { font-size: 13px; color: #555; font-weight: 600; transition: color 0.3s ease; }\r\n\r\n \/* 5. Right Panel Controls *\/\r\n .panel-title {\r\n margin: 0 0 20px 0;\r\n font-size: 20px;\r\n color: #2c3e50;\r\n text-align: center;\r\n }\r\n\r\n .target-toggles {\r\n display: flex;\r\n gap: 10px;\r\n margin-bottom: 25px;\r\n width: 100%;\r\n background: #f0f0f0;\r\n padding: 5px;\r\n border-radius: 12px;\r\n }\r\n\r\n .toggle-btn {\r\n flex: 1;\r\n padding: 10px;\r\n border: none;\r\n background: transparent;\r\n font-weight: bold;\r\n color: #666;\r\n cursor: pointer;\r\n border-radius: 8px;\r\n transition: all 0.3s;\r\n }\r\n\r\n .toggle-btn.active {\r\n background: #ffffff;\r\n color: #2c3e50;\r\n box-shadow: 0 2px 8px rgba(0,0,0,0.1);\r\n }\r\n\r\n \/* Shape Selector *\/\r\n .shape-selector {\r\n display: flex;\r\n gap: 16px;\r\n margin-bottom: 30px;\r\n justify-content: center;\r\n align-items: center;\r\n width: 100%;\r\n min-height: 50px;\r\n }\r\n\r\n .shape-btn {\r\n border: 2px solid #cbd5e1; \r\n background-color: transparent; \r\n cursor: pointer;\r\n transition: all 0.2s ease;\r\n }\r\n\r\n .shape-btn.active { \r\n border-color: #0f172a; \r\n background-color: #f1f5f9; \r\n box-shadow: 0 2px 6px rgba(0,0,0,0.15);\r\n }\r\n \r\n .shape-btn:hover:not(.active) { \r\n border-color: #94a3b8; \r\n background-color: #f8fafc;\r\n }\r\n\r\n .shape-sq-sm { width: 22px; height: 22px; border-radius: 4px; }\r\n .shape-sq-lg { width: 38px; height: 38px; border-radius: 5px; }\r\n .shape-rect-v { width: 22px; height: 38px; border-radius: 4px; }\r\n .shape-rect-h { width: 38px; height: 22px; border-radius: 4px; }\r\n .shape-plank { width: 46px; height: 14px; border-radius: 3px; }\r\n\r\n \/* 6. Preview Area *\/\r\n .preview-container {\r\n width: 100%;\r\n max-width: 320px;\r\n aspect-ratio: 1 \/ 1;\r\n margin-bottom: 30px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n background: #ffffff;\r\n border: 1px solid #dcdcdc;\r\n border-radius: 12px;\r\n overflow: hidden;\r\n box-shadow: inset 0 4px 10px rgba(0,0,0,0.05), 0 15px 25px rgba(0,0,0,0.1);\r\n }\r\n\r\n .preview-container svg {\r\n display: block;\r\n width: 100%;\r\n height: 100%;\r\n }\r\n\r\n .grout-bg { fill: var(--tile-line); transition: fill 0.4s ease; }\r\n .tile-base { fill: var(--tile-fill); transition: fill 0.4s ease; }\r\n \r\n \/* 7. WhatsApp Button *\/\r\n .whatsapp-btn {\r\n width: 100%;\r\n padding: 15px;\r\n background-color: #25D366;\r\n color: white;\r\n border: none;\r\n border-radius: 12px;\r\n font-size: 16px;\r\n font-weight: bold;\r\n cursor: pointer;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n gap: 10px;\r\n transition: background-color 0.3s, transform 0.2s;\r\n box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3);\r\n }\r\n\r\n .whatsapp-btn:hover {\r\n background-color: #128C7E;\r\n transform: translateY(-2px);\r\n }\r\n\r\n \/* 8. Toast Notification *\/\r\n #toast {\r\n visibility: hidden; min-width: 250px; background-color: #333; color: #fff;\r\n text-align: center; border-radius: 50px; padding: 14px 24px;\r\n position: fixed; z-index: 1000; left: 50%; bottom: 30px;\r\n transform: translateX(-50%); font-size: 14px; font-weight: 500;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.2); opacity: 0;\r\n transition: opacity 0.3s, bottom 0.3s;\r\n }\r\n #toast.show { visibility: visible; opacity: 1; bottom: 50px; }\r\n\r\n \/* --- Updated Color Definitions from PDF --- *\/\r\n .c01 { background-color: #FFFFFF; }\r\n .c02 { background-color: #F3DEB4; }\r\n .c03 { background-color: #B63F2F; }\r\n .c04 { background-color: #E6E7E7; }\r\n .c05 { background-color: #BE9A7C; }\r\n .c06 { background-color: #D18876; }\r\n .c07 { background-color: #B5B7B8; }\r\n .c08 { background-color: #AC7A64; }\r\n .c09 { background-color: #FBD0C2; }\r\n .c10 { background-color: #8C8F8C; }\r\n .c11 { background-color: #AB7963; }\r\n .c12 { background-color: #181B1D; }\r\n .c13 { background-color: #C7B19D; }\r\n .c14 { background-color: #864A35; }\r\n .c15 { background-color: #56534E; }\r\n .c16 { background-color: #F8E9CF; }\r\n .c17 { background-color: #482517; }\r\n .c18 { background-color: #F2EBE3; }\r\n .c19 { background-color: #FCEACC; }\r\n .c20 { background-color: #389DBA; }\r\n .c21 { background-color: #CFCBC0; }\r\n\r\n \/* ---------------------------------------------------\r\n MOBILE RESPONSIVENESS\r\n ---------------------------------------------------- *\/\r\n @media (max-width: 900px) {\r\n body { padding: 10px; }\r\n .header { margin-bottom: 15px; }\r\n .header h1 { font-size: 24px; }\r\n .app-container { flex-direction: column; gap: 15px; }\r\n\r\n .left-panel {\r\n order: 2; \r\n padding: 15px;\r\n border-radius: 16px;\r\n }\r\n \r\n .left-panel .panel-title {\r\n text-align: center;\r\n font-size: 18px;\r\n }\r\n\r\n .right-panel {\r\n order: 1; \r\n width: 100%;\r\n box-sizing: border-box;\r\n position: sticky; \r\n top: 5px; \r\n z-index: 100;\r\n padding: 15px;\r\n border-radius: 16px;\r\n box-shadow: 0 10px 25px rgba(0,0,0,0.15); \r\n display: grid;\r\n grid-template-columns: 120px 1fr;\r\n grid-template-rows: auto auto auto auto;\r\n gap: 8px 15px;\r\n align-items: center;\r\n }\r\n\r\n .right-panel .panel-title {\r\n grid-column: 1 \/ -1;\r\n grid-row: 1 \/ 2;\r\n font-size: 16px;\r\n margin: 0;\r\n text-align: left;\r\n }\r\n\r\n .preview-container {\r\n grid-column: 1 \/ 2;\r\n grid-row: 2 \/ 4; \r\n width: 120px;\r\n height: 120px;\r\n margin: 0;\r\n max-width: none;\r\n aspect-ratio: auto;\r\n }\r\n\r\n .target-toggles {\r\n grid-column: 2 \/ 3;\r\n grid-row: 2 \/ 3;\r\n margin: 0;\r\n padding: 4px;\r\n height: auto;\r\n }\r\n\r\n .toggle-btn { padding: 6px; font-size: 12px; }\r\n\r\n .shape-selector {\r\n grid-column: 2 \/ 3;\r\n grid-row: 3 \/ 4;\r\n margin: 0;\r\n justify-content: space-between;\r\n gap: 5px;\r\n min-height: auto;\r\n }\r\n\r\n .whatsapp-btn {\r\n grid-column: 1 \/ -1;\r\n grid-row: 4 \/ 5;\r\n margin-top: 5px;\r\n padding: 12px;\r\n font-size: 15px;\r\n }\r\n\r\n .grid-container {\r\n grid-template-columns: repeat(4, 1fr);\r\n gap: 15px 5px;\r\n max-width: 340px;\r\n margin: 0 auto;\r\n justify-items: center;\r\n }\r\n\r\n .box {\r\n width: 60px;\r\n height: 60px;\r\n border-width: 3px;\r\n }\r\n \r\n .copy-text { font-size: 10px; margin-bottom: 2px; }\r\n .hex-text { font-size: 9px; padding: 2px 4px; }\r\n .label { font-size: 11px; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n <div class=\"header\">\r\n <h1>White Sand<\/h1>\r\n <p>Tile Customization Studio<\/p>\r\n <\/div>\r\n\r\n <!-- Toast Notification -->\r\n <div id=\"toast\">Color updated!<\/div>\r\n\r\n <div class=\"app-container\">\r\n <!-- Left Panel: Colors -->\r\n <div class=\"left-panel\">\r\n <h2 class=\"panel-title\">Select Color Palette<\/h2>\r\n <div class=\"grid-container\">\r\n <!-- Color Items updated from Image -->\r\n <div class=\"color-item\" onclick=\"applyColor('#FFFFFF', 'WHITE')\"><div class=\"box c01\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#FFFFFF<\/span><\/div><\/div><div class=\"label\">WHITE<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#F3DEB4', '#55 Golden Beige')\"><div class=\"box c02\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#F3DEB4<\/span><\/div><\/div><div class=\"label\">#55 Golden Beige<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#B63F2F', '#64 Brick Stone')\"><div class=\"box c03\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#B63F2F<\/span><\/div><\/div><div class=\"label\">#64 Brick Stone<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#E6E7E7', '#50 Light Gray')\"><div class=\"box c04\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#E6E7E7<\/span><\/div><\/div><div class=\"label\">#50 Light Gray<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#BE9A7C', '#56 Desert')\"><div class=\"box c05\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#BE9A7C<\/span><\/div><\/div><div class=\"label\">#56 Desert<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#D18876', '#67 Salmon Rose')\"><div class=\"box c06\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#D18876<\/span><\/div><\/div><div class=\"label\">#67 Salmon Rose<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#B5B7B8', '#51 Pearl Gray')\"><div class=\"box c07\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#B5B7B8<\/span><\/div><\/div><div class=\"label\">#51 Pearl Gray<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#AC7A64', '#57 Mocha')\"><div class=\"box c08\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#AC7A64<\/span><\/div><\/div><div class=\"label\">#57 Mocha<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#FBD0C2', '#70 Cream')\"><div class=\"box c09\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#FBD0C2<\/span><\/div><\/div><div class=\"label\">#70 Cream<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#8C8F8C', '#74 Titanium')\"><div class=\"box c10\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#8C8F8C<\/span><\/div><\/div><div class=\"label\">#74 Titanium<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#AB7963', '#58 Clay Rose')\"><div class=\"box c11\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#AB7963<\/span><\/div><\/div><div class=\"label\">#58 Clay Rose<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#181B1D', '#66 Black')\"><div class=\"box c12\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#181B1D<\/span><\/div><\/div><div class=\"label\">#66 Black<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#C7B19D', '#52 Sand Stone')\"><div class=\"box c13\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#C7B19D<\/span><\/div><\/div><div class=\"label\">#52 Sand Stone<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#864A35', '#59 Brown')\"><div class=\"box c14\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#864A35<\/span><\/div><\/div><div class=\"label\">#59 Brown<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#56534E', '#77 Galaxy')\"><div class=\"box c15\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#56534E<\/span><\/div><\/div><div class=\"label\">#77 Galaxy<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#F8E9CF', '#53 Beige')\"><div class=\"box c16\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#F8E9CF<\/span><\/div><\/div><div class=\"label\">#53 Beige<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#482517', '#76 Dark Chocolate')\"><div class=\"box c17\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#482517<\/span><\/div><\/div><div class=\"label\">#76 Dark Chocolate<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#F2EBE3', '#72 off White')\"><div class=\"box c18\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#F2EBE3<\/span><\/div><\/div><div class=\"label\">#72 off White<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#FCEACC', '#54 Classic Beige')\"><div class=\"box c19\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#FCEACC<\/span><\/div><\/div><div class=\"label\">#54 Classic Beige<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#389DBA', '#61 Blue')\"><div class=\"box c20\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#389DBA<\/span><\/div><\/div><div class=\"label\">#61 Blue<\/div><\/div>\r\n <div class=\"color-item\" onclick=\"applyColor('#CFCBC0', '#73 Ivory Gray')\"><div class=\"box c21\"><div class=\"copy-overlay\"><span class=\"copy-text\">Apply<\/span><span class=\"hex-text\">#CFCBC0<\/span><\/div><\/div><div class=\"label\">#73 Ivory Gray<\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- Right Panel: Tile Editor -->\r\n <div class=\"right-panel\">\r\n <h2 class=\"panel-title\">Design Your Tile<\/h2>\r\n \r\n <!-- What to color toggle -->\r\n <div class=\"target-toggles\">\r\n <button class=\"toggle-btn active\" id=\"btn-base\" onclick=\"setEditMode('base')\">Tile Base<\/button>\r\n <button class=\"toggle-btn\" id=\"btn-lines\" onclick=\"setEditMode('lines')\">Lines<\/button>\r\n <\/div>\r\n\r\n <div class=\"shape-selector\">\r\n <div role=\"button\" class=\"shape-btn shape-sq-sm active\" onclick=\"setTileSize(60, 60, 'Small Square', this)\" title=\"Small Square\"><\/div>\r\n <div role=\"button\" class=\"shape-btn shape-sq-lg\" onclick=\"setTileSize(100, 100, 'Large Square', this)\" title=\"Large Square\"><\/div>\r\n <div role=\"button\" class=\"shape-btn shape-rect-v\" onclick=\"setTileSize(50, 100, 'Vertical Rectangle', this)\" title=\"Vertical Rectangle\"><\/div>\r\n <div role=\"button\" class=\"shape-btn shape-rect-h\" onclick=\"setTileSize(100, 50, 'Horizontal Rectangle', this)\" title=\"Horizontal Rectangle\"><\/div>\r\n <div role=\"button\" class=\"shape-btn shape-plank\" onclick=\"setTileSize(120, 30, 'Plank', this)\" title=\"Plank\"><\/div>\r\n <\/div>\r\n\r\n <!-- SVG Grid Preview Box -->\r\n <div class=\"preview-container\">\r\n <svg viewBox=\"0 0 320 320\">\r\n <defs>\r\n <!-- Subtle Texture Filter that doesn't wash out colors -->\r\n <filter id=\"stone-noise\" x=\"0\" y=\"0\" width=\"100%\" height=\"100%\">\r\n <feTurbulence type=\"fractalNoise\" baseFrequency=\"0.03\" numOctaves=\"3\" result=\"noise\"\/>\r\n <feColorMatrix type=\"matrix\" values=\"1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0.15 0\" in=\"noise\" result=\"alphaNoise\"\/>\r\n <\/filter>\r\n\r\n <!-- Dynamic Tile Pattern -->\r\n <pattern id=\"tile-pattern\" patternUnits=\"userSpaceOnUse\" width=\"64\" height=\"64\">\r\n <!-- Setting x=\"0\" and y=\"0\" removes the thick edge gap -->\r\n <rect id=\"tile-bg\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" class=\"tile-base\"\/>\r\n \r\n <!-- Texture Layer -->\r\n <rect id=\"tile-texture\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"black\" filter=\"url(#stone-noise)\" style=\"pointer-events: none; mix-blend-mode: overlay;\"\/>\r\n \r\n <!-- Inner Bevel Highlights & Shadows for realism -->\r\n <rect id=\"tile-highlight\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"none\" stroke=\"rgba(255,255,255,0.6)\" stroke-width=\"2\"\/>\r\n <rect id=\"tile-shadow\" width=\"60\" height=\"60\" x=\"0\" y=\"0\" fill=\"none\" stroke=\"rgba(0,0,0,0.1)\" stroke-width=\"1\"\/>\r\n <\/pattern>\r\n <\/defs>\r\n \r\n <!-- Grout Background (Lines) -->\r\n <rect width=\"100%\" height=\"100%\" class=\"grout-bg\" \/>\r\n \r\n <!-- Fills the entire preview area with the tile grid -->\r\n <rect width=\"100%\" height=\"100%\" fill=\"url(#tile-pattern)\"\/>\r\n <\/svg>\r\n <\/div>\r\n\r\n <!-- WhatsApp Send Button -->\r\n <button class=\"whatsapp-btn\" onclick=\"sendToWhatsApp()\">\r\n <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"currentColor\">\r\n <path d=\"M12.031 6.172c-3.181 0-5.767 2.586-5.768 5.766-.001 1.298.38 2.27 1.019 3.287l-.582 2.128 2.182-.573c.978.58 1.911.928 3.145.929 3.178 0 5.767-2.587 5.768-5.766.001-3.187-2.575-5.77-5.764-5.771zm3.392 8.244c-.144.405-.837.774-1.17.824-.299.045-.677.063-1.092-.069-.252-.08-.575-.988-.365-1.739-.751-2.874-2.502-2.961-2.617-.087-.116-.708-.94-.708-1.793s.448-1.273.607-1.446c.159-.173.346-.217.462-.217l.332.006c.106.005.249-.04.39.298.144.347.491 1.2.534 1.287.043.087.072.188.014.304-.058.116-.087.188-.173.289l-.26.304c-.087.086-.177.18-.076.354.101.174.449.741.964 1.201.662.591 1.221.774 1.394.86s.274.072.376-.043c.101-.116.433-.506.549-.68.116-.173.231-.145.39-.087s1.011.477 1.184.564.289.13.332.202c.045.072.045.419-.099.824zm-3.423-14.416c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm.029 18.88c-1.161 0-2.305-.292-3.318-.844l-3.677.964.984-3.595c-.607-1.052-.927-2.246-.926-3.468.001-3.825 3.113-6.937 6.937-6.937 1.856.001 3.598.723 4.907 2.034 1.31 1.311 2.031 3.054 2.03 4.908-.001 3.825-3.113 6.938-6.937 6.938z\"\/>\r\n <\/svg>\r\n Buy it on WhatsApp\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <script>\r\n \/\/ State Variables\r\n let editMode = 'base'; \/\/ Can be 'base' or 'lines'\r\n let currentBaseColor = '#E6E7E7'; \/\/ Updated default setup hex\r\n let currentBaseColorLabel = '#50 Light Gray'; \/\/ Updated default setup label to match new names\r\n let currentLineColor = '#389DBA'; \r\n let currentLineColorLabel = '#61 Blue'; \/\/ Updated default setup label to match new names\r\n let currentSizeName = 'Small Square';\r\n\r\n \/\/ 1. Handle Color Click\r\n function applyColor(hex, label) {\r\n \/\/ Copy to clipboard (background operation)\r\n const el = document.createElement('textarea');\r\n el.value = hex;\r\n el.setAttribute('readonly', '');\r\n el.style.position = 'absolute';\r\n el.style.left = '-9999px';\r\n document.body.appendChild(el);\r\n el.select();\r\n document.execCommand('copy');\r\n document.body.removeChild(el);\r\n \r\n \/\/ Apply color to SVG based on current mode and store labels for WhatsApp\r\n if (editMode === 'base') {\r\n currentBaseColor = hex;\r\n currentBaseColorLabel = label;\r\n document.documentElement.style.setProperty('--tile-fill', hex);\r\n showToast(`Base color set to ${label}`);\r\n } else {\r\n currentLineColor = hex;\r\n currentLineColorLabel = label;\r\n document.documentElement.style.setProperty('--tile-line', hex);\r\n showToast(`Lines color set to ${label}`);\r\n }\r\n }\r\n\r\n \/\/ 2. Switch Edit Mode (Tile Base vs Sprite Lines)\r\n function setEditMode(mode) {\r\n editMode = mode;\r\n \r\n \/\/ UI Toggle updates\r\n document.getElementById('btn-base').classList.remove('active');\r\n document.getElementById('btn-lines').classList.remove('active');\r\n \r\n if (mode === 'base') {\r\n document.getElementById('btn-base').classList.add('active');\r\n } else {\r\n document.getElementById('btn-lines').classList.add('active');\r\n }\r\n }\r\n\r\n \/\/ 3. Switch Tile Size\r\n function setTileSize(width, height, sizeName, btnElement) {\r\n currentSizeName = sizeName;\r\n\r\n \/\/ Update Pattern Dimensions (adds 4px for thicker grout lines so color pops)\r\n const gap = 4;\r\n \r\n const pattern = document.getElementById('tile-pattern');\r\n pattern.setAttribute('width', width + gap);\r\n pattern.setAttribute('height', height + gap);\r\n \r\n \/\/ Update Internal Rectangles (Always starting at 0 to avoid thick line scaling glitches)\r\n const rects = ['tile-bg', 'tile-texture', 'tile-highlight', 'tile-shadow'];\r\n rects.forEach(id => {\r\n const el = document.getElementById(id);\r\n el.setAttribute('width', width);\r\n el.setAttribute('height', height);\r\n el.setAttribute('x', 0);\r\n el.setAttribute('y', 0);\r\n });\r\n\r\n \/\/ Update active button styling\r\n document.querySelectorAll('.shape-btn').forEach(btn => {\r\n btn.classList.remove('active');\r\n });\r\n btnElement.classList.add('active');\r\n }\r\n\r\n \/\/ 4. WhatsApp Integration\r\n function sendToWhatsApp() {\r\n \/\/ Updated to the provided Saudi number\r\n const phoneNumber = \"966552474087\"; \r\n \r\n const messageText = `Hello White Sand Studio!\\n\\nI just designed a tile and I'm interested in ordering it.\\n\\nHere are my specs:\\n\ud83d\udd39 Size: *${currentSizeName}*\\n\ud83d\udd39 Base Color: *${currentBaseColorLabel}* (${currentBaseColor})\\n\ud83d\udd39 Lines Color: *${currentLineColorLabel}* (${currentLineColor})`;\r\n \r\n const whatsappUrl = `https:\/\/wa.me\/${phoneNumber}?text=${encodeURIComponent(messageText)}`;\r\n \r\n \/\/ Open in new tab\r\n window.open(whatsappUrl, '_blank');\r\n }\r\n\r\n \/\/ 5. Toast Notification Logic\r\n function showToast(message) {\r\n const toast = document.getElementById(\"toast\");\r\n toast.textContent = message;\r\n toast.className = \"show\";\r\n \r\n setTimeout(function(){ \r\n toast.className = toast.className.replace(\"show\", \"\"); \r\n }, 2500);\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>White Sand – Tile Configurator White Sand Tile Customization Studio Color updated! Select Color Palette Apply#FFFFFFWHITE Apply#F3DEB4#55 Golden Beige Apply#B63F2F#64 Brick Stone Apply#E6E7E7#50 Light Gray Apply#BE9A7C#56 Desert Apply#D18876#67 Salmon Rose Apply#B5B7B8#51 Pearl Gray Apply#AC7A64#57 Mocha Apply#FBD0C2#70 Cream Apply#8C8F8C#74 Titanium Apply#AB7963#58 Clay Rose Apply#181B1D#66 Black Apply#C7B19D#52 Sand Stone Apply#864A35#59 Brown Apply#56534E#77 Galaxy Apply#F8E9CF#53 Beige Apply#482517#76 Dark […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-6784","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784","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=6784"}],"version-history":[{"count":71,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784\/revisions"}],"predecessor-version":[{"id":7812,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6784\/revisions\/7812"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}