Sand and Soil Calculator<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n background-color: #ffffff;\r\n }\r\n \r\n .bg-pattern {\r\n position: fixed;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-image: \r\n radial-gradient(circle at 0% 50%, #DF2925 0%, transparent 40%), \r\n radial-gradient(circle at 100% 100%, #DF2925 0%, transparent 40%);\r\n opacity: 0.03;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateX(20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n .animate-fade-in {\r\n animation: fadeIn 0.4s ease-out forwards;\r\n }\r\n\r\n select {\r\n line-height: 1.5;\r\n display: flex;\r\n align-items: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-pattern\"><\/div>\r\n <div id=\"root\" class=\"relative z-10\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n \/\/ Icons\r\n const IconCalculator = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"\/><line x1=\"16\" x2=\"16.01\" y1=\"10\" y2=\"10\"\/><line x1=\"12\" x2=\"12.01\" y1=\"10\" y2=\"10\"\/><line x1=\"8\" x2=\"8.01\" y1=\"10\" y2=\"10\"\/><line x1=\"8\" x2=\"8.01\" y1=\"14\" y2=\"14\"\/><line x1=\"12\" x2=\"12.01\" y1=\"14\" y2=\"14\"\/><line x1=\"16\" x2=\"16.01\" y1=\"14\" y2=\"14\"\/><line x1=\"8\" x2=\"8.01\" y1=\"18\" y2=\"18\"\/><line x1=\"12\" x2=\"12.01\" y1=\"18\" y2=\"18\"\/><line x1=\"16\" x2=\"16.01\" y1=\"18\" y2=\"18\"\/><\/svg>);\r\n const IconBrickWall = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M12 9v6\"\/><path d=\"M16 15v6\"\/><path d=\"M16 3v6\"\/><path d=\"M3 15h18\"\/><path d=\"M3 9h18\"\/><path d=\"M8 15v6\"\/><path d=\"M8 3v6\"\/><\/svg>);\r\n const IconDroplet = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"\/><\/svg>);\r\n const IconPackage = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m7.5 4.27 9 5.15\"\/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg>);\r\n const IconDroplets = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\"\/><path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\"\/><\/svg>);\r\n const IconGauge = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m12 14 4-4\"\/><path d=\"M3.34 19a10 10 0 1 1 17.32 0\"\/><\/svg>);\r\n const IconPaintBucket = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z\"\/><path d=\"m5 2 5 5\"\/><path d=\"M2 13h15\"\/><path d=\"M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z\"\/><\/svg>);\r\n const IconInfo = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>);\r\n const IconChevronDown = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m6 9 6 6 6-6\"\/><\/svg>);\r\n\r\n function App() {\r\n const [projectType, setProjectType] = useState('');\r\n const [area, setArea] = useState('');\r\n const [result, setResult] = useState(null);\r\n\r\n const projectData = {\r\n 'Dirt Road Construction': { concRate: 1.0, waterRatio: 8, displayRatio: 8, note: 'Only the surface layer is sprayed. It is preferable to spray in two stages: first before maintenance and second after completion.' },\r\n 'Dirt Path Construction': { concRate: 0.5, waterRatio: 11, displayRatio: 11, note: 'Only the surface layer is sprayed.' },\r\n 'Slope Protection': { concRate: 0.33, waterRatio: 14.1515, displayRatio: 14, note: 'Only the surface layer is sprayed.' },\r\n 'Sand Berm Stabilization': { concRate: 0.3, waterRatio: 12.34, displayRatio: 12, note: 'Only the surface layer is sprayed.' },\r\n 'Dust Control': { concRate: 0.2, waterRatio: 17, displayRatio: 17, note: 'Only the surface layer is sprayed. Not designed for vehicle traffic.' }\r\n };\r\n\r\n const formatNum = (val) => {\r\n let str = val.toFixed(2);\r\n if (str.endsWith('.00')) return str.slice(0, -3); \r\n if (str.endsWith('0') && str.includes('.')) return str.slice(0, -1);\r\n return str;\r\n };\r\n\r\n const calculateMaterials = () => {\r\n if (!projectType || !area || isNaN(area) || Number(area) <= 0) return;\r\n const data = projectData[projectType];\r\n const areaValue = parseFloat(area);\r\n \r\n \/\/ Liquid Stabilizer Calculations\r\n const concentratedMaterial = areaValue * data.concRate;\r\n const waterQuantity = concentratedMaterial * data.waterRatio;\r\n const readyMixture = concentratedMaterial + waterQuantity;\r\n const sprayRate = readyMixture \/ areaValue;\r\n\r\n setResult({\r\n type: projectType,\r\n displayRatio: data.displayRatio,\r\n concentrate: formatNum(concentratedMaterial),\r\n water: formatNum(waterQuantity),\r\n mixture: formatNum(readyMixture),\r\n sprayRate: formatNum(sprayRate),\r\n note: data.note\r\n });\r\n };\r\n\r\n \/\/ Reusable Result Card component for uniform styling\r\n const ResultCard = ({ label, value, icon: Icon, fullWidth = false }) => (\r\n <div className={`bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-4 ${fullWidth ? 'col-span-1 md:col-span-2' : ''}`}>\r\n <div className=\"p-3 bg-gray-50 rounded-xl\">\r\n <Icon className=\"w-6 h-6 text-[#DF2925]\" \/>\r\n <\/div>\r\n <div>\r\n <div className=\"text-gray-400 text-[10px] font-black uppercase tracking-widest\">{label}<\/div>\r\n <div className=\"text-lg font-bold text-gray-800\">{value}<\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n\r\n return (\r\n <div className=\"min-h-screen flex items-center justify-center py-8 sm:py-12 px-4\">\r\n <div className=\"w-full max-w-6xl\">\r\n \r\n {\/* MAIN HEADER *\/}\r\n <div className=\"mb-10 text-center\">\r\n <h1 className=\"text-4xl font-black text-gray-900 tracking-tight uppercase\">\r\n SAND AND SOIL <span className=\"text-[#DF2925]\">CALCULATOR<\/span>\r\n <\/h1>\r\n <p className=\"text-gray-500 mt-2 font-medium uppercase tracking-widest text-xs\">Professional estimation for base and soil<\/p>\r\n <\/div>\r\n\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-start\">\r\n \r\n {\/* LEFT SIDE: PROJECT INPUTS *\/}\r\n <div className=\"space-y-4\">\r\n <div className=\"flex items-center gap-2 mb-2\">\r\n <div className=\"h-6 w-1.5 bg-[#DF2925] rounded-full\"><\/div>\r\n <h2 className=\"text-lg font-black text-gray-800 uppercase tracking-wider\">Project Parameters<\/h2>\r\n <\/div>\r\n \r\n <div className=\"bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden\">\r\n <div className=\"bg-[#DF2925] px-6 py-5 flex items-center gap-3\">\r\n <IconCalculator className=\"w-6 h-6 text-white\" \/>\r\n <h3 className=\"text-lg font-bold text-white uppercase tracking-wide\">Input Details<\/h3>\r\n <\/div>\r\n\r\n <div className=\"p-6 sm:p-8 space-y-6\">\r\n <div>\r\n <label className=\"block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2\">Application Type<\/label>\r\n <div className=\"relative\">\r\n <select \r\n value={projectType} \r\n onChange={(e) => { setProjectType(e.target.value); }}\r\n className=\"w-full h-14 pl-4 pr-10 bg-white border-2 border-gray-100 rounded-xl focus:ring-2 focus:ring-[#DF2925] focus:border-[#DF2925] outline-none appearance-none font-semibold text-gray-800 shadow-sm cursor-pointer transition-all leading-tight\"\r\n >\r\n <option value=\"\" disabled>Choose an option...<\/option>\r\n {Object.keys(projectData).map((key) => (<option key={key} value={key}>{key}<\/option>))}\r\n <\/select>\r\n <div className=\"absolute right-4 top-1\/2 -translate-y-1\/2 pointer-events-none text-gray-400\">\r\n <IconChevronDown className=\"w-5 h-5\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2\">Total Surface Area<\/label>\r\n <div className=\"relative flex items-stretch h-14\">\r\n <input \r\n type=\"number\" \r\n value={area}\r\n onChange={(e) => { setArea(e.target.value); }}\r\n placeholder=\"e.g. 1000\"\r\n className=\"w-full px-4 border-2 border-gray-100 border-r-0 rounded-l-xl focus:ring-2 focus:ring-[#DF2925] focus:border-[#DF2925] outline-none font-semibold text-gray-800 shadow-sm transition-all\"\r\n \/>\r\n <div className=\"flex items-center justify-center bg-gray-50 border-2 border-gray-100 border-l-0 rounded-r-xl px-6 text-gray-400 font-bold text-sm uppercase\">m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button \r\n onClick={calculateMaterials}\r\n disabled={!projectType || !area || Number(area) <= 0}\r\n className=\"w-full bg-black hover:bg-[#DF2925] disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed text-white font-black py-4 rounded-xl shadow-lg transition-all flex items-center justify-center gap-3 mt-4 text-lg active:scale-95\"\r\n >\r\n <IconCalculator className=\"w-5 h-5\" \/>\r\n CALCULATE NOW\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* RIGHT SIDE: CALCULATION RESULTS *\/}\r\n <div className=\"space-y-4 min-h-[400px]\">\r\n <div className=\"flex items-center gap-2 mb-2\">\r\n <div className=\"h-6 w-1.5 bg-black rounded-full\"><\/div>\r\n <h2 className=\"text-lg font-black text-gray-800 uppercase tracking-wider\">Calculation Report<\/h2>\r\n <\/div>\r\n\r\n {result ? (\r\n <div className=\"space-y-4 animate-fade-in\">\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n \r\n <ResultCard \r\n label=\"Selected Application\" \r\n value={result.type} \r\n icon={IconBrickWall} \r\n fullWidth={true} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Dilution Ratio\" \r\n value={`1 : ${result.displayRatio}`} \r\n icon={IconDroplet} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Concentrate Req.\" \r\n value={`${result.concentrate} Liters`} \r\n icon={IconPackage} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Water Quantity\" \r\n value={`${result.water} Liters`} \r\n icon={IconDroplets} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Spraying Rate\" \r\n value={`${result.sprayRate} L\/m\u00b2`} \r\n icon={IconGauge} \r\n \/>\r\n\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-5 col-span-1 md:col-span-2\">\r\n <div className=\"p-4 bg-gray-50 rounded-xl\"><IconPaintBucket className=\"w-8 h-8 text-[#DF2925]\" \/><\/div>\r\n <div>\r\n <div className=\"text-gray-400 text-xs font-black uppercase tracking-widest mb-1\">Total Mixed Volume<\/div>\r\n <div className=\"text-3xl font-black text-gray-800\">{result.mixture} Liters<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"bg-gray-50 rounded-2xl p-6 border border-gray-100\">\r\n <div className=\"flex items-center gap-2 mb-3\">\r\n <IconInfo className=\"w-5 h-5 text-gray-400\" \/>\r\n <h3 className=\"text-sm font-black text-gray-400 uppercase tracking-wider\">Technical Implementation<\/h3>\r\n <\/div>\r\n <p className=\"text-sm font-medium leading-relaxed text-gray-600 italic\">{result.note}<\/p>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"h-full min-h-[440px] border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center text-gray-400 p-8 text-center bg-white\/50 backdrop-blur-sm\">\r\n <div className=\"p-6 bg-gray-50 rounded-full mb-6\">\r\n <IconCalculator className=\"w-12 h-12 opacity-30\" \/>\r\n <\/div>\r\n <p className=\"font-black text-xl text-gray-400 uppercase tracking-tight\">Report Pending<\/p>\r\n <p className=\"text-sm mt-2 max-w-[240px]\">Enter the project area on the left to generate the material analysis report.<\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\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>Sand and Soil Calculator<\/p>","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-7108","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108","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=7108"}],"version-history":[{"count":32,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108\/revisions"}],"predecessor-version":[{"id":7243,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108\/revisions\/7243"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=7108"}],"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 Sand and Soil Calculator<\/title>\r\n \r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/react@18\/umd\/react.production.min.js\" crossorigin><\/script>\r\n <script src=\"https:\/\/unpkg.com\/react-dom@18\/umd\/react-dom.production.min.js\" crossorigin><\/script>\r\n \r\n <script src=\"https:\/\/unpkg.com\/@babel\/standalone\/babel.min.js\"><\/script>\r\n\r\n <style>\r\n body {\r\n font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;\r\n background-color: #ffffff;\r\n }\r\n \r\n .bg-pattern {\r\n position: fixed;\r\n top: 0; left: 0; right: 0; bottom: 0;\r\n background-image: \r\n radial-gradient(circle at 0% 50%, #DF2925 0%, transparent 40%), \r\n radial-gradient(circle at 100% 100%, #DF2925 0%, transparent 40%);\r\n opacity: 0.03;\r\n pointer-events: none;\r\n z-index: 0;\r\n }\r\n \r\n @keyframes fadeIn {\r\n from { opacity: 0; transform: translateX(20px); }\r\n to { opacity: 1; transform: translateX(0); }\r\n }\r\n .animate-fade-in {\r\n animation: fadeIn 0.4s ease-out forwards;\r\n }\r\n\r\n select {\r\n line-height: 1.5;\r\n display: flex;\r\n align-items: center;\r\n }\r\n <\/style>\r\n<\/head>\r\n<body>\r\n <div class=\"bg-pattern\"><\/div>\r\n <div id=\"root\" class=\"relative z-10\"><\/div>\r\n\r\n <script type=\"text\/babel\">\r\n const { useState } = React;\r\n\r\n \/\/ Icons\r\n const IconCalculator = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"16\" height=\"20\" x=\"4\" y=\"2\" rx=\"2\"\/><line x1=\"8\" x2=\"16\" y1=\"6\" y2=\"6\"\/><line x1=\"16\" x2=\"16.01\" y1=\"10\" y2=\"10\"\/><line x1=\"12\" x2=\"12.01\" y1=\"10\" y2=\"10\"\/><line x1=\"8\" x2=\"8.01\" y1=\"10\" y2=\"10\"\/><line x1=\"8\" x2=\"8.01\" y1=\"14\" y2=\"14\"\/><line x1=\"12\" x2=\"12.01\" y1=\"14\" y2=\"14\"\/><line x1=\"16\" x2=\"16.01\" y1=\"14\" y2=\"14\"\/><line x1=\"8\" x2=\"8.01\" y1=\"18\" y2=\"18\"\/><line x1=\"12\" x2=\"12.01\" y1=\"18\" y2=\"18\"\/><line x1=\"16\" x2=\"16.01\" y1=\"18\" y2=\"18\"\/><\/svg>);\r\n const IconBrickWall = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\"\/><path d=\"M12 9v6\"\/><path d=\"M16 15v6\"\/><path d=\"M16 3v6\"\/><path d=\"M3 15h18\"\/><path d=\"M3 9h18\"\/><path d=\"M8 15v6\"\/><path d=\"M8 3v6\"\/><\/svg>);\r\n const IconDroplet = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z\"\/><\/svg>);\r\n const IconPackage = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m7.5 4.27 9 5.15\"\/><path d=\"M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z\"\/><path d=\"m3.3 7 8.7 5 8.7-5\"\/><path d=\"M12 22V12\"\/><\/svg>);\r\n const IconDroplets = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z\"\/><path d=\"M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97\"\/><\/svg>);\r\n const IconGauge = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m12 14 4-4\"\/><path d=\"M3.34 19a10 10 0 1 1 17.32 0\"\/><\/svg>);\r\n const IconPaintBucket = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m19 11-8-8-8.6 8.6a2 2 0 0 0 0 2.8l5.2 5.2c.8.8 2 .8 2.8 0L19 11Z\"\/><path d=\"m5 2 5 5\"\/><path d=\"M2 13h15\"\/><path d=\"M22 20a2 2 0 1 1-4 0c0-1.6 1.7-2.4 2-4 .3 1.6 2 2.4 2 4Z\"\/><\/svg>);\r\n const IconInfo = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><circle cx=\"12\" cy=\"12\" r=\"10\"\/><path d=\"M12 16v-4\"\/><path d=\"M12 8h.01\"\/><\/svg>);\r\n const IconChevronDown = ({ className }) => (<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\" className={className}><path d=\"m6 9 6 6 6-6\"\/><\/svg>);\r\n\r\n function App() {\r\n const [projectType, setProjectType] = useState('');\r\n const [area, setArea] = useState('');\r\n const [result, setResult] = useState(null);\r\n\r\n const projectData = {\r\n 'Dirt Road Construction': { concRate: 1.0, waterRatio: 8, displayRatio: 8, note: 'Only the surface layer is sprayed. It is preferable to spray in two stages: first before maintenance and second after completion.' },\r\n 'Dirt Path Construction': { concRate: 0.5, waterRatio: 11, displayRatio: 11, note: 'Only the surface layer is sprayed.' },\r\n 'Slope Protection': { concRate: 0.33, waterRatio: 14.1515, displayRatio: 14, note: 'Only the surface layer is sprayed.' },\r\n 'Sand Berm Stabilization': { concRate: 0.3, waterRatio: 12.34, displayRatio: 12, note: 'Only the surface layer is sprayed.' },\r\n 'Dust Control': { concRate: 0.2, waterRatio: 17, displayRatio: 17, note: 'Only the surface layer is sprayed. Not designed for vehicle traffic.' }\r\n };\r\n\r\n const formatNum = (val) => {\r\n let str = val.toFixed(2);\r\n if (str.endsWith('.00')) return str.slice(0, -3); \r\n if (str.endsWith('0') && str.includes('.')) return str.slice(0, -1);\r\n return str;\r\n };\r\n\r\n const calculateMaterials = () => {\r\n if (!projectType || !area || isNaN(area) || Number(area) <= 0) return;\r\n const data = projectData[projectType];\r\n const areaValue = parseFloat(area);\r\n \r\n \/\/ Liquid Stabilizer Calculations\r\n const concentratedMaterial = areaValue * data.concRate;\r\n const waterQuantity = concentratedMaterial * data.waterRatio;\r\n const readyMixture = concentratedMaterial + waterQuantity;\r\n const sprayRate = readyMixture \/ areaValue;\r\n\r\n setResult({\r\n type: projectType,\r\n displayRatio: data.displayRatio,\r\n concentrate: formatNum(concentratedMaterial),\r\n water: formatNum(waterQuantity),\r\n mixture: formatNum(readyMixture),\r\n sprayRate: formatNum(sprayRate),\r\n note: data.note\r\n });\r\n };\r\n\r\n \/\/ Reusable Result Card component for uniform styling\r\n const ResultCard = ({ label, value, icon: Icon, fullWidth = false }) => (\r\n <div className={`bg-white p-5 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-4 ${fullWidth ? 'col-span-1 md:col-span-2' : ''}`}>\r\n <div className=\"p-3 bg-gray-50 rounded-xl\">\r\n <Icon className=\"w-6 h-6 text-[#DF2925]\" \/>\r\n <\/div>\r\n <div>\r\n <div className=\"text-gray-400 text-[10px] font-black uppercase tracking-widest\">{label}<\/div>\r\n <div className=\"text-lg font-bold text-gray-800\">{value}<\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n\r\n return (\r\n <div className=\"min-h-screen flex items-center justify-center py-8 sm:py-12 px-4\">\r\n <div className=\"w-full max-w-6xl\">\r\n \r\n {\/* MAIN HEADER *\/}\r\n <div className=\"mb-10 text-center\">\r\n <h1 className=\"text-4xl font-black text-gray-900 tracking-tight uppercase\">\r\n SAND AND SOIL <span className=\"text-[#DF2925]\">CALCULATOR<\/span>\r\n <\/h1>\r\n <p className=\"text-gray-500 mt-2 font-medium uppercase tracking-widest text-xs\">Professional estimation for base and soil<\/p>\r\n <\/div>\r\n\r\n <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-8 items-start\">\r\n \r\n {\/* LEFT SIDE: PROJECT INPUTS *\/}\r\n <div className=\"space-y-4\">\r\n <div className=\"flex items-center gap-2 mb-2\">\r\n <div className=\"h-6 w-1.5 bg-[#DF2925] rounded-full\"><\/div>\r\n <h2 className=\"text-lg font-black text-gray-800 uppercase tracking-wider\">Project Parameters<\/h2>\r\n <\/div>\r\n \r\n <div className=\"bg-white rounded-2xl shadow-xl border border-gray-100 overflow-hidden\">\r\n <div className=\"bg-[#DF2925] px-6 py-5 flex items-center gap-3\">\r\n <IconCalculator className=\"w-6 h-6 text-white\" \/>\r\n <h3 className=\"text-lg font-bold text-white uppercase tracking-wide\">Input Details<\/h3>\r\n <\/div>\r\n\r\n <div className=\"p-6 sm:p-8 space-y-6\">\r\n <div>\r\n <label className=\"block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2\">Application Type<\/label>\r\n <div className=\"relative\">\r\n <select \r\n value={projectType} \r\n onChange={(e) => { setProjectType(e.target.value); }}\r\n className=\"w-full h-14 pl-4 pr-10 bg-white border-2 border-gray-100 rounded-xl focus:ring-2 focus:ring-[#DF2925] focus:border-[#DF2925] outline-none appearance-none font-semibold text-gray-800 shadow-sm cursor-pointer transition-all leading-tight\"\r\n >\r\n <option value=\"\" disabled>Choose an option...<\/option>\r\n {Object.keys(projectData).map((key) => (<option key={key} value={key}>{key}<\/option>))}\r\n <\/select>\r\n <div className=\"absolute right-4 top-1\/2 -translate-y-1\/2 pointer-events-none text-gray-400\">\r\n <IconChevronDown className=\"w-5 h-5\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div>\r\n <label className=\"block text-xs font-bold text-gray-400 uppercase tracking-widest mb-2\">Total Surface Area<\/label>\r\n <div className=\"relative flex items-stretch h-14\">\r\n <input \r\n type=\"number\" \r\n value={area}\r\n onChange={(e) => { setArea(e.target.value); }}\r\n placeholder=\"e.g. 1000\"\r\n className=\"w-full px-4 border-2 border-gray-100 border-r-0 rounded-l-xl focus:ring-2 focus:ring-[#DF2925] focus:border-[#DF2925] outline-none font-semibold text-gray-800 shadow-sm transition-all\"\r\n \/>\r\n <div className=\"flex items-center justify-center bg-gray-50 border-2 border-gray-100 border-l-0 rounded-r-xl px-6 text-gray-400 font-bold text-sm uppercase\">m\u00b2<\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <button \r\n onClick={calculateMaterials}\r\n disabled={!projectType || !area || Number(area) <= 0}\r\n className=\"w-full bg-black hover:bg-[#DF2925] disabled:bg-gray-200 disabled:text-gray-400 disabled:cursor-not-allowed text-white font-black py-4 rounded-xl shadow-lg transition-all flex items-center justify-center gap-3 mt-4 text-lg active:scale-95\"\r\n >\r\n <IconCalculator className=\"w-5 h-5\" \/>\r\n CALCULATE NOW\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n {\/* RIGHT SIDE: CALCULATION RESULTS *\/}\r\n <div className=\"space-y-4 min-h-[400px]\">\r\n <div className=\"flex items-center gap-2 mb-2\">\r\n <div className=\"h-6 w-1.5 bg-black rounded-full\"><\/div>\r\n <h2 className=\"text-lg font-black text-gray-800 uppercase tracking-wider\">Calculation Report<\/h2>\r\n <\/div>\r\n\r\n {result ? (\r\n <div className=\"space-y-4 animate-fade-in\">\r\n <div className=\"grid grid-cols-1 md:grid-cols-2 gap-4\">\r\n \r\n <ResultCard \r\n label=\"Selected Application\" \r\n value={result.type} \r\n icon={IconBrickWall} \r\n fullWidth={true} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Dilution Ratio\" \r\n value={`1 : ${result.displayRatio}`} \r\n icon={IconDroplet} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Concentrate Req.\" \r\n value={`${result.concentrate} Liters`} \r\n icon={IconPackage} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Water Quantity\" \r\n value={`${result.water} Liters`} \r\n icon={IconDroplets} \r\n \/>\r\n\r\n <ResultCard \r\n label=\"Spraying Rate\" \r\n value={`${result.sprayRate} L\/m\u00b2`} \r\n icon={IconGauge} \r\n \/>\r\n\r\n <div className=\"bg-white p-6 rounded-2xl shadow-sm border border-gray-100 flex items-center gap-5 col-span-1 md:col-span-2\">\r\n <div className=\"p-4 bg-gray-50 rounded-xl\"><IconPaintBucket className=\"w-8 h-8 text-[#DF2925]\" \/><\/div>\r\n <div>\r\n <div className=\"text-gray-400 text-xs font-black uppercase tracking-widest mb-1\">Total Mixed Volume<\/div>\r\n <div className=\"text-3xl font-black text-gray-800\">{result.mixture} Liters<\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div className=\"bg-gray-50 rounded-2xl p-6 border border-gray-100\">\r\n <div className=\"flex items-center gap-2 mb-3\">\r\n <IconInfo className=\"w-5 h-5 text-gray-400\" \/>\r\n <h3 className=\"text-sm font-black text-gray-400 uppercase tracking-wider\">Technical Implementation<\/h3>\r\n <\/div>\r\n <p className=\"text-sm font-medium leading-relaxed text-gray-600 italic\">{result.note}<\/p>\r\n <\/div>\r\n <\/div>\r\n ) : (\r\n <div className=\"h-full min-h-[440px] border-2 border-dashed border-gray-200 rounded-2xl flex flex-col items-center justify-center text-gray-400 p-8 text-center bg-white\/50 backdrop-blur-sm\">\r\n <div className=\"p-6 bg-gray-50 rounded-full mb-6\">\r\n <IconCalculator className=\"w-12 h-12 opacity-30\" \/>\r\n <\/div>\r\n <p className=\"font-black text-xl text-gray-400 uppercase tracking-tight\">Report Pending<\/p>\r\n <p className=\"text-sm mt-2 max-w-[240px]\">Enter the project area on the left to generate the material analysis report.<\/p>\r\n <\/div>\r\n )}\r\n <\/div>\r\n\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n );\r\n }\r\n\r\n const root = ReactDOM.createRoot(document.getElementById('root'));\r\n root.render(<App \/>);\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>Sand and Soil Calculator<\/p>","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-7108","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108","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=7108"}],"version-history":[{"count":32,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108\/revisions"}],"predecessor-version":[{"id":7243,"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/pages\/7108\/revisions\/7243"}],"wp:attachment":[{"href":"https:\/\/www.whitesand.sa\/ar\/wp-json\/wp\/v2\/media?parent=7108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}