White Sand Grout Calculator<\/title>\r\n <style>\r\n \/* * SCOPED CSS FOR WORDPRESS COMPATIBILITY\r\n * All styles are prefixed with #ws-grout-calc-wrapper to prevent \r\n * conflicts with WordPress themes.\r\n *\/\r\n\r\n #ws-grout-calc-wrapper {\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n background-color: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 12px;\r\n max-width: 900px;\r\n margin: 20px auto;\r\n padding: 0;\r\n overflow: hidden;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n color: #334155;\r\n line-height: 1.5;\r\n }\r\n\r\n #ws-grout-calc-wrapper *, \r\n #ws-grout-calc-wrapper *::before, \r\n #ws-grout-calc-wrapper *::after {\r\n box-sizing: inherit;\r\n }\r\n\r\n \/* Header *\/\r\n #ws-grout-calc-wrapper .ws-header {\r\n background-color: #ffffff;\r\n border-bottom: 4px solid #da2128; \/* Brand Red Color *\/\r\n padding: 24px 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n gap: 24px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-logo {\r\n max-width: 150px;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header-text {\r\n text-align: left;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header h2 {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n line-height: 1.2;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header p {\r\n margin: 4px 0 0;\r\n font-size: 0.95rem;\r\n color: #64748b;\r\n }\r\n\r\n \/* Content Layout *\/\r\n #ws-grout-calc-wrapper .ws-content {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 32px;\r\n gap: 40px;\r\n }\r\n\r\n \/* Input Section *\/\r\n #ws-grout-calc-wrapper .ws-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f5f9;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-inputs {\r\n flex: 1 1 350px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-input-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n #ws-grout-calc-wrapper label {\r\n display: block;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #475569;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-input-wrapper {\r\n position: relative;\r\n }\r\n\r\n #ws-grout-calc-wrapper input[type=\"number\"] {\r\n width: 100%;\r\n padding: 12px 16px;\r\n padding-right: 50px; \/* Space for unit *\/\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #1e293b;\r\n background-color: #f8fafc;\r\n border: 1px solid #cbd5e1;\r\n border-radius: 8px;\r\n transition: all 0.2s ease-in-out;\r\n -moz-appearance: textfield;\r\n }\r\n\r\n #ws-grout-calc-wrapper input[type=\"number\"]:focus {\r\n background-color: #ffffff;\r\n border-color: #da2128;\r\n outline: 0;\r\n box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.2);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-unit {\r\n position: absolute;\r\n right: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #94a3b8;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Results & Summary Section *\/\r\n #ws-grout-calc-wrapper .ws-results-col {\r\n flex: 1 1 350px;\r\n background-color: #f8fafc;\r\n border-radius: 12px;\r\n padding: 24px;\r\n border: 1px solid #e2e8f0;\r\n }\r\n\r\n \/* Summary Table *\/\r\n #ws-grout-calc-wrapper .ws-summary-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-bottom: 24px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table th,\r\n #ws-grout-calc-wrapper .ws-summary-table td {\r\n padding: 10px;\r\n border-bottom: 1px solid #e2e8f0;\r\n text-align: left;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table th {\r\n color: #64748b;\r\n font-weight: 600;\r\n width: 60%;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table td {\r\n color: #334155;\r\n font-weight: 500;\r\n text-align: right;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table tr:last-child th,\r\n #ws-grout-calc-wrapper .ws-summary-table tr:last-child td {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Result Cards *\/\r\n #ws-grout-calc-wrapper .ws-result-card {\r\n background-color: #ffffff;\r\n border-left: 5px solid #da2128;\r\n padding: 20px;\r\n margin-bottom: 16px;\r\n border-radius: 6px;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total {\r\n background-color: #da2128;\r\n border-left: none;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-label {\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-value,\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-unit {\r\n color: #ffffff;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-label {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: #64748b;\r\n margin-bottom: 6px;\r\n font-weight: 700;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-value {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: #1e293b;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-unit {\r\n font-size: 1rem;\r\n color: #64748b;\r\n font-weight: 500;\r\n margin-left: 4px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-disclaimer {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 16px;\r\n text-align: center;\r\n line-height: 1.4;\r\n font-style: italic;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #ws-grout-calc-wrapper .ws-content {\r\n flex-direction: column;\r\n gap: 24px;\r\n padding: 20px;\r\n }\r\n #ws-grout-calc-wrapper .ws-header {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 20px;\r\n }\r\n #ws-grout-calc-wrapper .ws-header-text {\r\n text-align: center;\r\n }\r\n #ws-grout-calc-wrapper .ws-result-value {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"ws-grout-calc-wrapper\">\r\n <div class=\"ws-header\">\r\n <img decoding=\"async\" src=\"https:\/\/www.whitesand.sa\/wp-content\/uploads\/2025\/12\/logo-2.png\" alt=\"White Sand Logo\" class=\"ws-logo\">\r\n <div class=\"ws-header-text\">\r\n <h2>Grout Consumption Calculator<\/h2>\r\n <p>Calculate the required grout for your project instantly<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-content\">\r\n \r\n <div class=\"ws-inputs\">\r\n <div class=\"ws-section-title\">Dimensions<\/div>\r\n \r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-length\">Tile Length (A)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-length\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-width\">Tile Width (B)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-width\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-thickness\">Tile Thickness (C)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-thickness\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-joint-width\">Joint Width (D)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-joint-width\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-total-area\">Total Area to Tile<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-total-area\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">m\u00b2<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"ws-results-col\">\r\n <div class=\"ws-section-title\">Summary<\/div>\r\n \r\n <table class=\"ws-summary-table\">\r\n <thead>\r\n <tr>\r\n <th>Parameter<\/th>\r\n <th>Value<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Tile Length<\/td>\r\n <td><span id=\"ws-sum-length\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Tile Width<\/td>\r\n <td><span id=\"ws-sum-width\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Tile Thickness<\/td>\r\n <td><span id=\"ws-sum-thick\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Joint Width<\/td>\r\n <td><span id=\"ws-sum-joint\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Total Area<\/td>\r\n <td><span id=\"ws-sum-area\">0<\/span> m\u00b2<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <div class=\"ws-result-card\">\r\n <div class=\"ws-result-label\">Consumption Rate<\/div>\r\n <div class=\"ws-result-value\">\r\n <span id=\"ws-res-rate\">0.00<\/span> \r\n <span class=\"ws-result-unit\">kg\/m\u00b2<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-result-card total\">\r\n <div class=\"ws-result-label\">Total Grout Required<\/div>\r\n <div class=\"ws-result-value\">\r\n <span id=\"ws-res-total\">0.00<\/span> \r\n <span class=\"ws-result-unit\">kg<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-disclaimer\">\r\n Calculations are based on a density factor of 1.5 kg\/L. Actual site consumption may vary due to wastage and application method.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function() {\r\n \/\/ Function to safely get element by ID within our namespace\r\n const $ = (id) => document.getElementById(id);\r\n\r\n const inputs = {\r\n length: $('ws-tile-length'),\r\n width: $('ws-tile-width'),\r\n thickness: $('ws-tile-thickness'),\r\n joint: $('ws-joint-width'),\r\n area: $('ws-total-area')\r\n };\r\n\r\n const summary = {\r\n length: $('ws-sum-length'),\r\n width: $('ws-sum-width'),\r\n thickness: $('ws-sum-thick'),\r\n joint: $('ws-sum-joint'),\r\n area: $('ws-sum-area')\r\n };\r\n\r\n const resRate = $('ws-res-rate');\r\n const resTotal = $('ws-res-total');\r\n\r\n \/\/ White Sand Grout Density Factor\r\n const DENSITY_FACTOR = 1.5;\r\n\r\n function updateSummary(L, W, T, J, Area) {\r\n summary.length.textContent = L || 0;\r\n summary.width.textContent = W || 0;\r\n summary.thickness.textContent = T || 0;\r\n summary.joint.textContent = J || 0;\r\n summary.area.textContent = Area || 0;\r\n }\r\n\r\n function calculate() {\r\n \/\/ Get values\r\n const L = parseFloat(inputs.length.value) || 0;\r\n const W = parseFloat(inputs.width.value) || 0;\r\n const T = parseFloat(inputs.thickness.value) || 0;\r\n const J = parseFloat(inputs.joint.value) || 0;\r\n const Area = parseFloat(inputs.area.value) || 0;\r\n\r\n \/\/ Update Summary Table immediately on Input\r\n updateSummary(L, W, T, J, Area);\r\n\r\n \/\/ Validate to avoid division by zero or negative logic\r\n if (L <= 0 || W <= 0 || T <= 0 || J <= 0) {\r\n \/\/ Just reset results if invalid, keep inputs\r\n resRate.textContent = \"0.00\";\r\n resTotal.textContent = \"0.00\";\r\n return;\r\n }\r\n\r\n \/\/ FORMULA: ((L + W) \/ (L * W)) * J * T * Density\r\n const factor1 = (L + W) \/ (L * W);\r\n const consumptionPerSqm = factor1 * J * T * DENSITY_FACTOR;\r\n const totalQuantity = consumptionPerSqm * Area;\r\n\r\n \/\/ Update UI\r\n resRate.textContent = consumptionPerSqm.toFixed(2);\r\n resTotal.textContent = totalQuantity.toFixed(2);\r\n }\r\n\r\n \/\/ Real-time Event Listeners for all inputs\r\n Object.values(inputs).forEach(input => {\r\n input.addEventListener('input', calculate);\r\n input.addEventListener('keyup', calculate);\r\n });\r\n\r\n })();\r\n <\/script>\r\n\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 Grout Calculator Grout Consumption Calculator Calculate the required grout for your project instantly Dimensions Tile Length (A) mm Tile Width (B) mm Tile Thickness (C) mm Joint Width (D) mm Total Area to Tile m\u00b2 Summary Parameter Value Tile Length 0 mm Tile Width 0 mm Tile Thickness 0 mm Joint Width 0 […]<\/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-6241","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241","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=6241"}],"version-history":[{"count":8,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions"}],"predecessor-version":[{"id":7478,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions\/7478"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n\t\t\t\t

\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 Grout Calculator<\/title>\r\n <style>\r\n \/* * SCOPED CSS FOR WORDPRESS COMPATIBILITY\r\n * All styles are prefixed with #ws-grout-calc-wrapper to prevent \r\n * conflicts with WordPress themes.\r\n *\/\r\n\r\n #ws-grout-calc-wrapper {\r\n font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;\r\n box-sizing: border-box;\r\n background-color: #ffffff;\r\n border: 1px solid #e2e8f0;\r\n border-radius: 12px;\r\n max-width: 900px;\r\n margin: 20px auto;\r\n padding: 0;\r\n overflow: hidden;\r\n box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);\r\n color: #334155;\r\n line-height: 1.5;\r\n }\r\n\r\n #ws-grout-calc-wrapper *, \r\n #ws-grout-calc-wrapper *::before, \r\n #ws-grout-calc-wrapper *::after {\r\n box-sizing: inherit;\r\n }\r\n\r\n \/* Header *\/\r\n #ws-grout-calc-wrapper .ws-header {\r\n background-color: #ffffff;\r\n border-bottom: 4px solid #da2128; \/* Brand Red Color *\/\r\n padding: 24px 32px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: flex-start;\r\n gap: 24px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-logo {\r\n max-width: 150px;\r\n height: auto;\r\n display: block;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header-text {\r\n text-align: left;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header h2 {\r\n margin: 0;\r\n font-size: 1.5rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n line-height: 1.2;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-header p {\r\n margin: 4px 0 0;\r\n font-size: 0.95rem;\r\n color: #64748b;\r\n }\r\n\r\n \/* Content Layout *\/\r\n #ws-grout-calc-wrapper .ws-content {\r\n display: flex;\r\n flex-wrap: wrap;\r\n padding: 32px;\r\n gap: 40px;\r\n }\r\n\r\n \/* Input Section *\/\r\n #ws-grout-calc-wrapper .ws-section-title {\r\n font-size: 1.1rem;\r\n font-weight: 700;\r\n color: #1e293b;\r\n margin-bottom: 20px;\r\n padding-bottom: 10px;\r\n border-bottom: 2px solid #f1f5f9;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-inputs {\r\n flex: 1 1 350px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-input-group {\r\n margin-bottom: 20px;\r\n }\r\n\r\n #ws-grout-calc-wrapper label {\r\n display: block;\r\n font-size: 0.9rem;\r\n font-weight: 600;\r\n margin-bottom: 8px;\r\n color: #475569;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-input-wrapper {\r\n position: relative;\r\n }\r\n\r\n #ws-grout-calc-wrapper input[type=\"number\"] {\r\n width: 100%;\r\n padding: 12px 16px;\r\n padding-right: 50px; \/* Space for unit *\/\r\n font-size: 1rem;\r\n line-height: 1.5;\r\n color: #1e293b;\r\n background-color: #f8fafc;\r\n border: 1px solid #cbd5e1;\r\n border-radius: 8px;\r\n transition: all 0.2s ease-in-out;\r\n -moz-appearance: textfield;\r\n }\r\n\r\n #ws-grout-calc-wrapper input[type=\"number\"]:focus {\r\n background-color: #ffffff;\r\n border-color: #da2128;\r\n outline: 0;\r\n box-shadow: 0 0 0 3px rgba(218, 33, 40, 0.2);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-unit {\r\n position: absolute;\r\n right: 16px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n color: #94a3b8;\r\n font-size: 0.85rem;\r\n font-weight: 600;\r\n pointer-events: none;\r\n }\r\n\r\n \/* Results & Summary Section *\/\r\n #ws-grout-calc-wrapper .ws-results-col {\r\n flex: 1 1 350px;\r\n background-color: #f8fafc;\r\n border-radius: 12px;\r\n padding: 24px;\r\n border: 1px solid #e2e8f0;\r\n }\r\n\r\n \/* Summary Table *\/\r\n #ws-grout-calc-wrapper .ws-summary-table {\r\n width: 100%;\r\n border-collapse: collapse;\r\n margin-bottom: 24px;\r\n font-size: 0.9rem;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table th,\r\n #ws-grout-calc-wrapper .ws-summary-table td {\r\n padding: 10px;\r\n border-bottom: 1px solid #e2e8f0;\r\n text-align: left;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table th {\r\n color: #64748b;\r\n font-weight: 600;\r\n width: 60%;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table td {\r\n color: #334155;\r\n font-weight: 500;\r\n text-align: right;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-summary-table tr:last-child th,\r\n #ws-grout-calc-wrapper .ws-summary-table tr:last-child td {\r\n border-bottom: none;\r\n }\r\n\r\n \/* Result Cards *\/\r\n #ws-grout-calc-wrapper .ws-result-card {\r\n background-color: #ffffff;\r\n border-left: 5px solid #da2128;\r\n padding: 20px;\r\n margin-bottom: 16px;\r\n border-radius: 6px;\r\n box-shadow: 0 2px 4px rgba(0,0,0,0.05);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total {\r\n background-color: #da2128;\r\n border-left: none;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-label {\r\n color: rgba(255, 255, 255, 0.9);\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-value,\r\n #ws-grout-calc-wrapper .ws-result-card.total .ws-result-unit {\r\n color: #ffffff;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-label {\r\n font-size: 0.8rem;\r\n text-transform: uppercase;\r\n letter-spacing: 0.5px;\r\n color: #64748b;\r\n margin-bottom: 6px;\r\n font-weight: 700;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-value {\r\n font-size: 1.8rem;\r\n font-weight: 800;\r\n color: #1e293b;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-result-unit {\r\n font-size: 1rem;\r\n color: #64748b;\r\n font-weight: 500;\r\n margin-left: 4px;\r\n }\r\n\r\n #ws-grout-calc-wrapper .ws-disclaimer {\r\n font-size: 0.75rem;\r\n color: #94a3b8;\r\n margin-top: 16px;\r\n text-align: center;\r\n line-height: 1.4;\r\n font-style: italic;\r\n }\r\n\r\n @media (max-width: 768px) {\r\n #ws-grout-calc-wrapper .ws-content {\r\n flex-direction: column;\r\n gap: 24px;\r\n padding: 20px;\r\n }\r\n #ws-grout-calc-wrapper .ws-header {\r\n flex-direction: column;\r\n text-align: center;\r\n padding: 20px;\r\n }\r\n #ws-grout-calc-wrapper .ws-header-text {\r\n text-align: center;\r\n }\r\n #ws-grout-calc-wrapper .ws-result-value {\r\n font-size: 1.5rem;\r\n }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n\r\n \r\n <div id=\"ws-grout-calc-wrapper\">\r\n <div class=\"ws-header\">\r\n <img decoding=\"async\" src=\"https:\/\/www.whitesand.sa\/wp-content\/uploads\/2025\/12\/logo-2.png\" alt=\"White Sand Logo\" class=\"ws-logo\">\r\n <div class=\"ws-header-text\">\r\n <h2>Grout Consumption Calculator<\/h2>\r\n <p>Calculate the required grout for your project instantly<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-content\">\r\n \r\n <div class=\"ws-inputs\">\r\n <div class=\"ws-section-title\">Dimensions<\/div>\r\n \r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-length\">Tile Length (A)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-length\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-width\">Tile Width (B)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-width\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-tile-thickness\">Tile Thickness (C)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-tile-thickness\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-joint-width\">Joint Width (D)<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-joint-width\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">mm<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-input-group\">\r\n <label for=\"ws-total-area\">Total Area to Tile<\/label>\r\n <div class=\"ws-input-wrapper\">\r\n <input type=\"number\" id=\"ws-total-area\" placeholder=\"0\" min=\"0\">\r\n <span class=\"ws-unit\">m\u00b2<\/span>\r\n <\/div>\r\n <\/div>\r\n \r\n \r\n <\/div>\r\n\r\n \r\n <div class=\"ws-results-col\">\r\n <div class=\"ws-section-title\">Summary<\/div>\r\n \r\n <table class=\"ws-summary-table\">\r\n <thead>\r\n <tr>\r\n <th>Parameter<\/th>\r\n <th>Value<\/th>\r\n <\/tr>\r\n <\/thead>\r\n <tbody>\r\n <tr>\r\n <td>Tile Length<\/td>\r\n <td><span id=\"ws-sum-length\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Tile Width<\/td>\r\n <td><span id=\"ws-sum-width\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Tile Thickness<\/td>\r\n <td><span id=\"ws-sum-thick\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Joint Width<\/td>\r\n <td><span id=\"ws-sum-joint\">0<\/span> mm<\/td>\r\n <\/tr>\r\n <tr>\r\n <td>Total Area<\/td>\r\n <td><span id=\"ws-sum-area\">0<\/span> m\u00b2<\/td>\r\n <\/tr>\r\n <\/tbody>\r\n <\/table>\r\n\r\n <div class=\"ws-result-card\">\r\n <div class=\"ws-result-label\">Consumption Rate<\/div>\r\n <div class=\"ws-result-value\">\r\n <span id=\"ws-res-rate\">0.00<\/span> \r\n <span class=\"ws-result-unit\">kg\/m\u00b2<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-result-card total\">\r\n <div class=\"ws-result-label\">Total Grout Required<\/div>\r\n <div class=\"ws-result-value\">\r\n <span id=\"ws-res-total\">0.00<\/span> \r\n <span class=\"ws-result-unit\">kg<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"ws-disclaimer\">\r\n Calculations are based on a density factor of 1.5 kg\/L. Actual site consumption may vary due to wastage and application method.\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n \r\n <script>\r\n (function() {\r\n \/\/ Function to safely get element by ID within our namespace\r\n const $ = (id) => document.getElementById(id);\r\n\r\n const inputs = {\r\n length: $('ws-tile-length'),\r\n width: $('ws-tile-width'),\r\n thickness: $('ws-tile-thickness'),\r\n joint: $('ws-joint-width'),\r\n area: $('ws-total-area')\r\n };\r\n\r\n const summary = {\r\n length: $('ws-sum-length'),\r\n width: $('ws-sum-width'),\r\n thickness: $('ws-sum-thick'),\r\n joint: $('ws-sum-joint'),\r\n area: $('ws-sum-area')\r\n };\r\n\r\n const resRate = $('ws-res-rate');\r\n const resTotal = $('ws-res-total');\r\n\r\n \/\/ White Sand Grout Density Factor\r\n const DENSITY_FACTOR = 1.5;\r\n\r\n function updateSummary(L, W, T, J, Area) {\r\n summary.length.textContent = L || 0;\r\n summary.width.textContent = W || 0;\r\n summary.thickness.textContent = T || 0;\r\n summary.joint.textContent = J || 0;\r\n summary.area.textContent = Area || 0;\r\n }\r\n\r\n function calculate() {\r\n \/\/ Get values\r\n const L = parseFloat(inputs.length.value) || 0;\r\n const W = parseFloat(inputs.width.value) || 0;\r\n const T = parseFloat(inputs.thickness.value) || 0;\r\n const J = parseFloat(inputs.joint.value) || 0;\r\n const Area = parseFloat(inputs.area.value) || 0;\r\n\r\n \/\/ Update Summary Table immediately on Input\r\n updateSummary(L, W, T, J, Area);\r\n\r\n \/\/ Validate to avoid division by zero or negative logic\r\n if (L <= 0 || W <= 0 || T <= 0 || J <= 0) {\r\n \/\/ Just reset results if invalid, keep inputs\r\n resRate.textContent = \"0.00\";\r\n resTotal.textContent = \"0.00\";\r\n return;\r\n }\r\n\r\n \/\/ FORMULA: ((L + W) \/ (L * W)) * J * T * Density\r\n const factor1 = (L + W) \/ (L * W);\r\n const consumptionPerSqm = factor1 * J * T * DENSITY_FACTOR;\r\n const totalQuantity = consumptionPerSqm * Area;\r\n\r\n \/\/ Update UI\r\n resRate.textContent = consumptionPerSqm.toFixed(2);\r\n resTotal.textContent = totalQuantity.toFixed(2);\r\n }\r\n\r\n \/\/ Real-time Event Listeners for all inputs\r\n Object.values(inputs).forEach(input => {\r\n input.addEventListener('input', calculate);\r\n input.addEventListener('keyup', calculate);\r\n });\r\n\r\n })();\r\n <\/script>\r\n\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 Grout Calculator Grout Consumption Calculator Calculate the required grout for your project instantly Dimensions Tile Length (A) mm Tile Width (B) mm Tile Thickness (C) mm Joint Width (D) mm Total Area to Tile m\u00b2 Summary Parameter Value Tile Length 0 mm Tile Width 0 mm Tile Thickness 0 mm Joint Width 0 […]<\/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-6241","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241","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=6241"}],"version-history":[{"count":8,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions"}],"predecessor-version":[{"id":7478,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/6241\/revisions\/7478"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=6241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}