{"id":6998,"date":"2026-03-20T02:43:46","date_gmt":"2026-03-20T06:43:46","guid":{"rendered":"https:\/\/epoxy.express\/epoxy-and-polymer-project-price-calculator\/"},"modified":"2026-09-02T18:52:19","modified_gmt":"2026-09-02T22:52:19","slug":"epoxy-and-polymer-project-price-calculator","status":"publish","type":"page","link":"https:\/\/epoxy.express\/en\/epoxy-and-polymer-project-price-calculator\/","title":{"rendered":"Epoxy and polymer project price calculator!"},"content":{"rendered":"\t\t
\n\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\r\n\r\n\r\n \r\n \r\n Industrial Epoxy Calculator & Strategy Dashboard<\/title>\r\n <!-- CDN Libraries -->\r\n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n <script src=\"https:\/\/code.jquery.com\/jquery-3.7.1.min.js\"><\/script>\r\n\r\n <!-- Tailwind Config -->\r\n <script>\r\n tailwind.config = {\r\n theme: {\r\n extend: {\r\n colors: {\r\n brand: {\r\n red: '#CC0000',\r\n dark: '#1c1c1c',\r\n slate: '#334155',\r\n surface: '#F8FAFC',\r\n light: '#f4f4f5'\r\n }\r\n },\r\n fontFamily: {\r\n sans: ['Inter', 'system-ui', 'sans-serif'],\r\n display: ['Outfit', 'sans-serif']\r\n }\r\n }\r\n }\r\n }\r\n <\/script>\r\n\r\n <!-- Custom CSS -->\r\n <style>\r\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;500;600;700;800&family=Outfit:wght@600;800&display=swap');\r\n #epoxy-app-wrapper { font-size: 15px; font-weight: 500; transition: background-color 0.3s ease, color 0.3s ease; }\r\n .glass-card { background: rgba(255, 255, 255, 0.2); border: 1px solid rgba(0, 0, 0, 0.15); border-radius: 1.25rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }\r\n input[type=range] { appearance: none; background: #cbd5e1; height: 8px; border-radius: 4px; }\r\n input[type=range]::-webkit-slider-thumb { appearance: none; width: 22px; height: 22px; background: #CC0000; border-radius: 50%; cursor: pointer; border: 3px solid white; box-shadow: 0 3px 6px rgba(0,0,0,0.4); }\r\n .fade-in { animation: fadeIn 0.4s ease-out forwards; }\r\n @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }\r\n .receipt-line { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed rgba(0,0,0,0.15); font-size: 14px; }\r\n .tab-content { display: none; }\r\n .tab-content.active { display: block; }\r\n .system-btn.active { border-color: #CC0000; background-color: rgba(204,0,0,0.04); box-shadow: inset 0 2px 4px rgba(0,0,0,0.05); }\r\n .expert-btn.active, .cond-btn.active, .type-btn.active { background-color: #1c1c1c; border-color: #1c1c1c; color: white; }\r\n .hero-card-dark { background: #1c1c1c; background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px; }\r\n\r\n @media print {\r\n nav, header, footer, #tab-navigation, .tab-content:not(#tab-calculator), #theme-toggle { display: none !important; }\r\n body { background: white !important; color: black !important; }\r\n #epoxy-app-wrapper { width:100%; border: none !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }\r\n main { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }\r\n .lg\\:col-span-5 { display: none !important; }\r\n .lg\\:col-span-7 { width: 100% !important; grid-column: span 12 \/ span 12 !important; }\r\n .glass-card, .hero-card-dark { background: white !important; border: 2px solid #1c1c1c !important; box-shadow: none !important; break-inside: avoid; color: #1c1c1c !important; }\r\n .hero-card-dark * { color: #1c1c1c !important; text-shadow: none !important; }\r\n .hero-card-dark .text-brand-red { color: #CC0000 !important; }\r\n #submission-form, button, #verify-modal { display: none !important; }\r\n .receipt-line { border-bottom: 1px solid #cbd5e1 !important; }\r\n }\r\n <\/style>\r\n<\/head>\r\n<body class=\"bg-slate-50 text-slate-800 antialiased font-sans\">\r\n\r\n<div id=\"epoxy-app-wrapper\" class=\"bg-slate-50 text-slate-800 antialiased font-sans rounded-2xl shadow-md border border-slate-300 w-full max-w-[1400px] mx-auto my-6\" style=\"width:100%;\">\r\n\r\n <main class=\"py-10 w-full px-4 md:px-10\">\r\n\r\n <section id=\"tab-calculator\" class=\"tab-content active fade-in\">\r\n <div class=\"grid grid-cols-1 lg:grid-cols-12 gap-10\">\r\n <div class=\"lg:col-span-5 space-y-6\">\r\n <div class=\"glass-card p-8 border-t-4 border-brand-dark\">\r\n <h3 class=\"text-xs font-black mb-8 uppercase flex items-center gap-3 text-brand-dark tracking-[0.2em] italic border-b border-slate-300 pb-3\">\r\n <span class=\"text-2xl\">\ud83e\uddee<\/span><span>Logistics Configurations<\/span>\r\n <\/h3>\r\n <div class=\"space-y-10\">\r\n\r\n <!-- PROJECT TYPE -->\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 italic\">Project Type<\/label>\r\n <div class=\"flex gap-2 font-black italic\" id=\"type-buttons\">\r\n <button data-type=\"residential\" class=\"type-btn active flex-1 py-3 rounded-lg text-sm border-2 transition-all bg-brand-dark border-brand-dark text-white shadow-md\">Residential<\/button>\r\n <button data-type=\"commercial\" class=\"type-btn flex-1 py-3 rounded-lg text-sm border-2 border-slate-300 text-slate-700 transition-all hover:bg-slate-200\">Commercial<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6 border-t border-slate-300\">\r\n <div class=\"flex justify-between items-center mb-4\">\r\n <label class=\"text-xs font-black text-slate-700 uppercase italic\">Surface Area (sq ft)<\/label>\r\n <span class=\"text-[11px] font-bold text-brand-red bg-red-50 px-2.5 py-1 rounded-full border border-red-200 shadow-sm\">Max: 500,000<\/span>\r\n <\/div>\r\n <input type=\"number\" id=\"input-area\" value=\"1000\" max=\"500000\" class=\"w-full p-5 bg-white rounded-xl text-4xl font-black text-brand-dark outline-none border-2 border-slate-300 focus:border-brand-red text-center shadow-inner italic transition-colors duration-300\" \/>\r\n <input type=\"range\" id=\"range-area\" min=\"100\" max=\"500000\" step=\"500\" value=\"1000\" class=\"w-full mt-6\" \/>\r\n <\/div>\r\n\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 italic\">Deployed Crew (Experts @ $65\/h)<\/label>\r\n <div class=\"flex gap-2 font-black italic\" id=\"expert-buttons\">\r\n <button data-val=\"2\" class=\"expert-btn active flex-1 py-3 rounded-lg text-sm border-2 transition-all shadow-md\">2<\/button>\r\n <button data-val=\"4\" class=\"expert-btn flex-1 py-3 rounded-lg text-sm border-2 border-slate-300 text-slate-700 transition-all hover:bg-slate-200\">4<\/button>\r\n <button data-val=\"6\" class=\"expert-btn flex-1 py-3 rounded-lg text-sm border-2 border-slate-300 text-slate-700 transition-all hover:bg-slate-200\">6<\/button>\r\n <button data-val=\"8\" class=\"expert-btn flex-1 py-3 rounded-lg text-sm border-2 border-slate-300 text-slate-700 transition-all hover:bg-slate-200\">8<\/button>\r\n <\/div>\r\n <\/div>\r\n\r\n <!-- SLAB CONDITION & CRACKS -->\r\n <div class=\"pt-6 border-t border-slate-300\">\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 italic\">Slab Condition<\/label>\r\n <div class=\"flex gap-2 font-black italic mb-6\" id=\"condition-buttons\">\r\n <button data-cond=\"used\" class=\"cond-btn active flex-1 py-3 rounded-lg text-sm border-2 transition-all shadow-md\">Used (Existing)<\/button>\r\n <button data-cond=\"new\" class=\"cond-btn flex-1 py-3 rounded-lg text-sm border-2 border-slate-300 text-slate-700 transition-all hover:bg-slate-200\">New<\/button>\r\n <\/div>\r\n\r\n <div id=\"cracks-container\" class=\"space-y-4 transition-all duration-300 bg-slate-100 p-5 rounded-2xl border border-slate-200\">\r\n <label class=\"text-xs font-black text-brand-red uppercase block mb-3 italic flex items-center gap-2\"><span>\ud83e\ude79<\/span> <span>Repair (Cracks \/ Imperfections)<\/span><\/label>\r\n\r\n <div class=\"flex justify-between items-center bg-white p-4 rounded-xl border border-slate-300 shadow-sm\">\r\n <div class=\"flex-1 pr-4\">\r\n <p class=\"text-[11px] font-black text-brand-dark uppercase leading-tight\">Small (< 35" long, < 2.5" deep)<\/p>\r\n <p class=\"text-[11px] text-brand-red font-bold mt-1\">$115 \/ unit<\/p>\r\n <\/div>\r\n <input type=\"number\" id=\"crack-small\" value=\"0\" min=\"0\" class=\"crack-input w-20 p-3 bg-slate-50 rounded-lg text-center text-lg font-black text-brand-dark border border-slate-300 focus:border-brand-red outline-none\" \/>\r\n <\/div>\r\n\r\n <div class=\"flex justify-between items-center bg-white p-4 rounded-xl border border-slate-300 shadow-sm\">\r\n <div class=\"flex-1 pr-4\">\r\n <p class=\"text-[11px] font-black text-brand-dark uppercase leading-tight\">Medium (35-55" long, 3" deep)<\/p>\r\n <p class=\"text-[11px] text-brand-red font-bold mt-1\">$175 \/ unit<\/p>\r\n <\/div>\r\n <input type=\"number\" id=\"crack-med\" value=\"0\" min=\"0\" class=\"crack-input w-20 p-3 bg-slate-50 rounded-lg text-center text-lg font-black text-brand-dark border border-slate-300 focus:border-brand-red outline-none\" \/>\r\n <\/div>\r\n\r\n <div class=\"flex justify-between items-center bg-white p-4 rounded-xl border border-slate-300 shadow-sm\">\r\n <div class=\"flex-1 pr-4\">\r\n <p class=\"text-[11px] font-black text-brand-dark uppercase leading-tight\">Major (> 55" long, > 3" deep)<\/p>\r\n <p class=\"text-[11px] text-brand-red font-bold mt-1\">$250 \/ unit<\/p>\r\n <\/div>\r\n <input type=\"number\" id=\"crack-large\" value=\"0\" min=\"0\" class=\"crack-input w-20 p-3 bg-slate-50 rounded-lg text-center text-lg font-black text-brand-dark border border-slate-300 focus:border-brand-red outline-none\" \/>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-6 border-t border-slate-300\">\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-4 italic flex items-center gap-2\"><span>\ud83e\uddea<\/span> <span>Resin System<\/span><\/label>\r\n <div class=\"space-y-3\" id=\"systems-container\"><\/div>\r\n <\/div>\r\n\r\n <!-- 5th Layer Option (Flakes) -->\r\n <div id=\"layer-5-container\" class=\"hidden p-5 rounded-2xl border-2 border-slate-300 bg-white cursor-pointer transition-all flex items-center justify-between hover:border-brand-red shadow-sm mt-4\">\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"text-3xl\" id=\"icon-layer5\">\u2728<\/span>\r\n <div>\r\n <span class=\"font-black uppercase text-sm tracking-widest italic text-brand-dark block\">5th Layer (Perfect Finish)<\/span>\r\n <span class=\"text-[11px] text-slate-600 font-bold\">Additional HD Polyaspartic (+ $3\/sq ft)<\/span>\r\n <\/div>\r\n <\/div>\r\n <div class=\"w-12 h-6 rounded-full p-1 transition-all bg-slate-300\" id=\"toggle-layer5-bg\">\r\n <div class=\"w-4 h-4 bg-white rounded-full transition-all shadow-sm\" id=\"toggle-layer5-dot\"><\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div id=\"btn-express\" class=\"p-5 rounded-2xl border-2 border-slate-300 bg-white cursor-pointer transition-all flex items-center justify-between hover:border-brand-red shadow-sm mt-4\">\r\n <div class=\"flex items-center gap-4\">\r\n <span class=\"text-3xl\" id=\"icon-express\">\u26a1<\/span>\r\n <span class=\"font-black uppercase text-sm tracking-widest italic text-brand-dark\">24h Express Priority<\/span>\r\n <\/div>\r\n <div class=\"w-12 h-6 rounded-full p-1 transition-all bg-slate-300\" id=\"toggle-express-bg\">\r\n <div class=\"w-4 h-4 bg-white rounded-full transition-all shadow-sm\" id=\"toggle-express-dot\"><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"p-6 bg-brand-dark rounded-2xl text-white italic font-bold border-l-8 border-brand-red shadow-xl\">\r\n <p class=\"text-[10px] uppercase text-brand-red mb-2 tracking-widest font-black\">CNESST Operational Standard (8h\/day)<\/p>\r\n <p class=\"text-sm leading-relaxed opacity-95\">Delay calculations incorporate the 8h\/day per worker limit and the mandatory 12-hour minimum drying time between each layer.<\/p>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"lg:col-span-7 space-y-8\">\r\n <div class=\"hero-card-dark p-12 rounded-[2.5rem] text-white shadow-2xl relative overflow-hidden group border-2 border-slate-800\">\r\n <p class=\"text-slate-300 text-xs font-black uppercase tracking-[0.4em] mb-6 italic text-center\">ESTIMATED PROJECT INVESTMENT (GROSS)<\/p>\r\n <div class=\"text-6xl md:text-8xl lg:text-[7rem] font-black tracking-tighter italic text-center drop-shadow-2xl leading-none flex flex-col md:flex-row justify-center items-center md:items-baseline gap-3 text-white\">\r\n <span id=\"out-total\">0<\/span> <span class=\"text-3xl md:text-4xl font-display uppercase text-brand-red\">$ CAD<\/span>\r\n <\/div>\r\n <div class=\"grid grid-cols-2 gap-6 mt-12\">\r\n <div class=\"p-6 bg-white\/10 rounded-3xl backdrop-blur-md border border-white\/10 font-black italic\">\r\n <p class=\"text-[10px] uppercase opacity-80 mb-2 text-slate-300 tracking-widest\">Net Profitability<\/p>\r\n <p class=\"text-3xl md:text-4xl text-brand-red tracking-tighter drop-shadow-md\" id=\"out-net\">+0 $<\/p>\r\n <\/div>\r\n <div class=\"p-6 bg-white\/10 rounded-3xl backdrop-blur-md border border-white\/10 font-black italic text-center\">\r\n <p class=\"text-[10px] uppercase opacity-80 mb-2 text-slate-300 tracking-widest\">Job Duration<\/p>\r\n <p class=\"text-3xl md:text-4xl tracking-tighter drop-shadow-md\"><span id=\"out-days\">0<\/span> <span class=\"text-xl opacity-80\">Day(s)<\/span><\/p>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-10 shadow-xl border-t-8 border-brand-red relative overflow-hidden\">\r\n <div class=\"flex flex-col sm:flex-row justify-between items-start sm:items-center mb-8 border-b border-slate-300 pb-5 gap-4\">\r\n <h3 class=\"text-2xl font-black uppercase tracking-tighter italic flex items-center gap-3 text-brand-dark\">\r\n <span class=\"text-3xl\">\ud83e\uddfe<\/span><span>Strategic Detailed Invoice<\/span>\r\n <\/h3>\r\n <button onclick=\"window.print()\" class=\"flex items-center gap-2 px-5 py-3 bg-white hover:bg-slate-100 rounded-xl text-[11px] font-black uppercase tracking-widest text-brand-dark transition-colors border-2 border-slate-300 shadow-sm w-full sm:w-auto justify-center\">\r\n <span class=\"text-lg\">\ud83d\udda8\ufe0f<\/span> <span>Print \/ PDF<\/span>\r\n <\/button>\r\n <\/div>\r\n\r\n <div class=\"space-y-6 font-bold italic font-black text-sm\">\r\n <div class=\"bg-slate-50 p-6 rounded-2xl border-2 border-slate-200\">\r\n <h4 class=\"text-xs uppercase font-black text-brand-dark mb-4 flex items-center gap-3 italic\"><span class=\"text-lg\">\ud83d\udce6<\/span> <span>Section 1: Materials & Layer Kits<\/span><\/h4>\r\n <div class=\"receipt-line text-slate-600\"><span><span>Gross Cost of Kits & Layers<\/span><\/span> <span id=\"out-mat-raw\" class=\"text-base\">0 $<\/span><\/div>\r\n <div class=\"receipt-line text-brand-dark\"><span><span>Management Margin (20%)<\/span><\/span> <span id=\"out-mat-margin\" class=\"text-base\">+0 $<\/span><\/div>\r\n\r\n <!-- LAYER DETAILS & EXPLANATIONS -->\r\n <div class=\"mt-4 p-5 bg-white rounded-xl border border-slate-300 shadow-sm space-y-3\">\r\n <p class=\"text-xs font-black uppercase text-brand-red tracking-wider\">Composition & Layers of Selected System (12h cure between each) :<\/p>\r\n <ul id=\"receipt-layers-list\" class=\"space-y-1.5 pl-1\">\r\n <!-- Dynamically injected -->\r\n <\/ul>\r\n <\/div>\r\n\r\n <div class=\"flex justify-between items-center bg-red-50 p-4 rounded-xl border border-red-200 mt-4 shadow-sm\">\r\n <span class=\"text-xs uppercase font-black text-brand-dark flex items-center gap-2\"><span class=\"text-lg\">\ud83e\udea3<\/span> <span id=\"out-mat-qty-label\">Product Kits \/ Boxes<\/span><\/span>\r\n <span id=\"out-mat-qty\" class=\"text-xl font-black text-brand-red\">0 Kits<\/span>\r\n <\/div>\r\n\r\n <div class=\"flex justify-between font-black text-xl pt-4 mt-4 border-t-2 border-slate-300 text-brand-dark\"><span>Total Materials<\/span><span id=\"out-mat-final\">0 $<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 p-6 rounded-2xl border-2 border-slate-200\">\r\n <h4 class=\"text-xs uppercase font-black text-brand-dark mb-4 flex items-center gap-3 italic\"><span class=\"text-lg\">\ud83d\udd27<\/span> <span>Section 2: Labor ($65\/h)<\/span><\/h4>\r\n <div class=\"receipt-line text-slate-600\"><span><span>Base Salary<\/span> (<span id=\"out-hours\">0<\/span>h)<\/span> <span id=\"out-lab-raw\" class=\"text-base\">0 $<\/span><\/div>\r\n <div class=\"receipt-line text-brand-dark\"><span><span>Expertise Markup (25%)<\/span><\/span> <span id=\"out-lab-margin\" class=\"text-base\">+0 $<\/span><\/div>\r\n <div class=\"flex justify-between font-black text-xl pt-4 mt-4 border-t-2 border-slate-300 text-brand-dark\"><span>Total Expertise<\/span><span id=\"out-lab-final\">0 $<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-50 p-6 rounded-2xl border-2 border-slate-200\" id=\"receipt-deposits-section\">\r\n <h4 class=\"text-xs uppercase font-black text-brand-dark mb-4 flex items-center gap-3 italic\"><span class=\"text-lg\">\ud83d\udee1\ufe0f<\/span> <span>Section 3: Equipment Deposits (Refundable)<\/span><\/h4>\r\n <div class=\"receipt-line text-slate-700\"><span><span>Grinder + HEPA Combo (800$ single deposit)<\/span><\/span> <span id=\"out-deposit\" class=\"text-base font-black text-brand-dark\">800 $<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-slate-100 p-6 rounded-2xl border-2 border-slate-300\" id=\"receipt-repairs-section\">\r\n <h4 class=\"text-xs uppercase font-black text-brand-dark mb-4 flex items-center gap-3 italic\"><span class=\"text-lg\">\ud83e\ude79<\/span> <span>Section 4: Preparation & Repairs<\/span><\/h4>\r\n <div class=\"receipt-line text-brand-red font-black text-base\"><span><span>Patching (Cracks\/Imperfections)<\/span><\/span> <span id=\"out-repairs\">0 $<\/span><\/div>\r\n <\/div>\r\n\r\n <div class=\"bg-brand-dark p-6 rounded-2xl text-white shadow-xl mt-6 border border-slate-700\" id=\"receipt-compliance-section\">\r\n <div class=\"receipt-line border-white\/20 text-slate-200\">\r\n <span class=\"flex items-center gap-3\"><span class=\"text-brand-red text-xl\">\u2696\ufe0f<\/span> <span class=\"text-sm\">Compliance & RBQ Royalties (7%)<\/span><\/span><span id=\"out-comp\" class=\"text-lg font-black text-white\">0 $<\/span>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-8 px-4 space-y-3 border-t-4 border-brand-dark\">\r\n <div class=\"flex justify-between text-slate-600 uppercase text-[11px]\"><span>Net Subtotal Before Taxes<\/span> <span id=\"out-sub\" class=\"font-black text-brand-dark text-base\">0 $<\/span><\/div>\r\n <div class=\"receipt-line text-slate-600\"><span><span>GST (5%)<\/span><\/span> <span id=\"out-tps\" class=\"font-black text-brand-dark text-base\">0 $<\/span><\/div>\r\n <div class=\"receipt-line text-slate-600\"><span><span>QST (9.975%)<\/span><\/span> <span id=\"out-tvq\" class=\"font-black text-brand-dark text-base\">0 $<\/span><\/div>\r\n <div class=\"flex justify-between text-3xl font-black pt-6 mt-6 border-t-4 border-brand-red uppercase text-brand-dark\">\r\n <span>Net Payable<\/span><span id=\"out-grand\">0 $<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-10 space-y-8 mt-8 shadow-xl border border-slate-200\">\r\n <div class=\"flex justify-between items-center border-b border-slate-300 pb-5\">\r\n <h4 class=\"font-black uppercase tracking-[0.2em] text-xs text-brand-dark italic flex items-center gap-3\"><span class=\"text-xl\">\u23f1\ufe0f<\/span> <span>Timeline & 12h Curing<\/span><\/h4>\r\n <span class=\"px-4 py-1.5 bg-slate-100 text-brand-dark rounded-full text-[10px] font-black uppercase tracking-widest border border-slate-300\" id=\"timeline-logic\">Logic: 0h \/ (2 Exp x 8h)<\/span>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 font-bold italic\">\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border-l-4 border-slate-400 shadow-sm\"><span class=\"w-8 h-8 rounded-full bg-slate-700 text-white flex items-center justify-center text-xs font-black not-italic\">1<\/span><div class=\"flex-1\"><p class=\"text-xs uppercase font-black text-brand-dark\">Preparation & Grinding<\/p><p class=\"text-[10px] text-slate-600 leading-none uppercase mt-1\">CSP 3 Diamond<\/p><\/div><span class=\"text-sm font-black text-brand-dark\" id=\"time-1\">0h<\/span><\/div>\r\n <div class=\"flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border-l-4 border-brand-red shadow-sm\"><span class=\"w-8 h-8 rounded-full bg-brand-red text-white flex items-center justify-center text-xs font-black not-italic\">2<\/span><div class=\"flex-1\"><p class=\"text-xs uppercase font-black text-brand-dark\">MVB + 12h Cure<\/p><p class=\"text-[10px] text-slate-600 leading-none uppercase mt-1\">Moisture Barrier<\/p><\/div><span class=\"text-sm font-black text-brand-dark\" id=\"time-2\">0h<\/span><\/div>\r\n <\/div>\r\n <div class=\"space-y-4\">\r\n <div class=\"flex items-center gap-4 p-4 bg-slate-50 rounded-2xl border-l-4 border-slate-800 shadow-sm\"><span class=\"w-8 h-8 rounded-full bg-slate-800 text-white flex items-center justify-center text-xs font-black not-italic\">3<\/span><div class=\"flex-1\"><p class=\"text-xs uppercase font-black text-brand-dark\">Layers & Topcoats<\/p><p class=\"text-[10px] text-slate-600 leading-none uppercase mt-1\">12h cure between layers<\/p><\/div><span class=\"text-sm font-black text-brand-dark\" id=\"time-3\">0h<\/span><\/div>\r\n <div class=\"p-4 bg-brand-dark rounded-2xl text-white shadow-lg border border-slate-700\">\r\n <div class=\"flex justify-between items-center mb-3\"><span class=\"text-[10px] uppercase font-black text-brand-red tracking-widest\">Estimated Total Duration<\/span><span class=\"text-sm font-black text-white\" id=\"time-total\">0 Hours<\/span><\/div>\r\n <div class=\"w-full bg-slate-800 h-2.5 rounded-full overflow-hidden mt-2\"><div class=\"bg-brand-red h-full shadow-[0_0_10px_#CC0000]\" style=\"width: 100%;\"><\/div><\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"glass-card p-10 md:p-14 shadow-2xl border-t-8 border-brand-dark relative overflow-hidden mt-12\" style=\"width:100%;\">\r\n <h3 class=\"text-3xl font-black mb-10 uppercase tracking-tighter italic flex items-center gap-4 border-b-2 border-slate-200 pb-5 text-brand-dark\">\r\n <span class=\"text-4xl\">\u2709\ufe0f<\/span><span>Send My Estimate<\/span>\r\n <\/h3>\r\n <form id=\"submission-form\" class=\"space-y-8 w-full\">\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">First Name<\/label>\r\n <input type=\"text\" id=\"form-fname\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Last Name<\/label>\r\n <input type=\"text\" id=\"form-lname\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8\">\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Email Address<\/label>\r\n <input type=\"email\" id=\"form-email\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Phone Number<\/label>\r\n <input type=\"tel\" id=\"form-phone\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\" \/>\r\n <\/div>\r\n <\/div>\r\n <div class=\"grid grid-cols-1\">\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Work Location (City \/ Postal Code)<\/label>\r\n <input type=\"text\" id=\"form-location\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\" \/>\r\n <\/div>\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">General Information About Your Project<\/label>\r\n <textarea id=\"form-info\" rows=\"5\" required class=\"w-full p-4 bg-slate-50 rounded-xl text-base font-bold text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors\"><\/textarea>\r\n <\/div>\r\n\r\n <div class=\"grid grid-cols-1 md:grid-cols-2 gap-8 mt-6\">\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Finish Example (Optional)<\/label>\r\n <input type=\"file\" id=\"form-file-example\" accept=\"image\/*,.pdf\" class=\"w-full p-3 bg-slate-50 rounded-xl text-sm text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-red-50 file:text-brand-red hover:file:bg-red-100\" \/>\r\n <\/div>\r\n <div>\r\n <label class=\"text-xs font-black text-slate-700 uppercase block mb-3 tracking-wide\">Floor Plan (Optional)<\/label>\r\n <input type=\"file\" id=\"form-file-plan\" accept=\"image\/*,.pdf\" class=\"w-full p-3 bg-slate-50 rounded-xl text-sm text-brand-dark outline-none border-2 border-slate-200 focus:border-brand-red transition-colors file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-bold file:bg-red-50 file:text-brand-red hover:file:bg-red-100\" \/>\r\n <\/div>\r\n <\/div>\r\n\r\n <div class=\"pt-8 border-t-2 border-slate-200 mt-8\">\r\n <button type=\"submit\" class=\"w-full p-6 bg-brand-red text-white font-black text-xl uppercase tracking-widest rounded-xl hover:bg-red-800 transition-colors flex items-center justify-center gap-4 shadow-xl\">\r\n <span class=\"text-2xl\">\u2709\ufe0f<\/span> <span>Verify & Send Estimate<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/form>\r\n <\/div>\r\n <\/section>\r\n\r\n <div id=\"verify-modal\" style=\"z-index: 999999 !important;\" class=\"hidden fixed inset-0 overflow-y-auto bg-brand-dark\/95 backdrop-blur-md opacity-0 transition-opacity duration-300\">\r\n <div class=\"flex min-h-screen items-center justify-center p-4 py-12\">\r\n <div class=\"bg-white rounded-3xl w-full max-w-3xl shadow-2xl transform scale-95 transition-transform duration-300 flex flex-col border border-slate-200 my-auto\" id=\"verify-modal-content\">\r\n <div class=\"p-6 md:p-8 border-b-2 border-slate-200 flex justify-between items-center sticky top-0 bg-white z-20 rounded-t-3xl\">\r\n <h3 class=\"text-2xl font-black text-brand-dark uppercase italic flex items-center gap-3\"><span class=\"text-3xl\">\ud83d\udd0d<\/span> <span>Review Your Estimate<\/span><\/h3>\r\n <button id=\"close-modal\" class=\"text-slate-400 hover:text-brand-red text-4xl leading-none transition-colors\">×<\/button>\r\n <\/div>\r\n <div class=\"p-6 md:p-8 space-y-6 text-base font-medium\" id=\"verify-details\"><\/div>\r\n <div class=\"p-6 md:p-8 border-t-2 border-slate-200 bg-slate-50 flex flex-col sm:flex-row gap-4 rounded-b-3xl\">\r\n <button id=\"btn-cancel-send\" class=\"flex-1 p-4 bg-white border-2 border-slate-300 text-slate-700 font-black text-lg uppercase tracking-widest rounded-xl hover:bg-slate-100 transition-colors\">Modify<\/button>\r\n <button id=\"btn-confirm-send\" class=\"flex-[2] p-4 bg-brand-red text-white font-black text-lg uppercase tracking-widest rounded-xl hover:bg-red-800 transition-colors flex items-center justify-center gap-3 shadow-lg\">\r\n <span class=\"text-xl\">\ud83d\ude80<\/span> <span>Confirm & Send<\/span>\r\n <\/button>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n\r\n <\/main>\r\n\r\n <footer class=\"py-16 border-t-2 border-slate-200 text-center font-bold italic bg-white shadow-inner font-black transition-colors duration-300 mt-auto w-full\">\r\n <div class=\"w-full px-4 space-y-8\">\r\n <div class=\"flex flex-col items-center gap-8\">\r\n <span class=\"text-5xl opacity-80\">\ud83c\udfe2<\/span>\r\n <div class=\"flex flex-wrap justify-center gap-8 text-[11px] uppercase font-black tracking-widest text-slate-600\">\r\n <span class=\"flex items-center gap-3\"><span class=\"text-brand-red text-lg\">\ud83d\udccd<\/span> Montreal \u2022 Laval \u2022 South Shore<\/span>\r\n <span class=\"flex items-center gap-3\"><span class=\"text-brand-red text-lg\">\ud83d\udee1\ufe0f<\/span> $2M Liability Insurance<\/span>\r\n <span class=\"flex items-center gap-3\"><span class=\"text-brand-red text-lg\">\u23f1\ufe0f<\/span> Max Cycle 8h \/ Day<\/span>\r\n <\/div>\r\n <\/div>\r\n <\/div>\r\n <\/footer>\r\n\r\n<\/div>\r\n\r\n<script>\r\nfunction initEpoxyApp() {\r\n const MAX_HOURS_PER_DAY = 8;\r\n const EXPERT_HOURLY_RATE = 65;\r\n const state = { \r\n projectType: 'residential', \r\n area: 1000, \r\n experts: 2, \r\n system: 'polyurea_flakes', \r\n isExpress: false, \r\n condition: 'used',\r\n hasLayer5: false\r\n };\r\n\r\n const systemsData = {\r\n polyurea_flakes: { \r\n name: \"Polyurea \/ Flakes (4 to 5 Layer System)\", \r\n calcType: 'layered_flakes',\r\n prepTime: 0.015, \r\n applyTime: 0.025, \r\n coverage: 400, \r\n icon: '\ud83e\uddf1', \r\n desc: \"Multi-layer high-performance system for garage or basement.\", \r\n layersDetail: [\r\n \"Layer 1: MVB (Moisture vapor barrier - $220 kit \/ 400 sq ft)\",\r\n \"Layer 2: Epoxy\/Polyurea base coat ($220 kit \/ 400 sq ft)\",\r\n \"Layer 3: 100% saturation vinyl flakes (2 boxes @ $145 \/ 400 sq ft)\",\r\n \"Layer 4: HD Polyaspartic topcoat ($280 kit \/ 400 sq ft)\",\r\n \"Option Layer 5: Additional HD Polyaspartic topcoat (+$3\/sq ft)\"\r\n ]\r\n },\r\n epoxy_100: { \r\n name: \"100% Solid Epoxy ($12\/sq ft)\", \r\n calcType: 'sqft_rate',\r\n rate: 12, \r\n matCostRate: 0.35, \r\n prepTime: 0.012, \r\n applyTime: 0.015, \r\n coverage: 400, \r\n icon: '\ud83c\udfed', \r\n desc: \"$12 \/ sq ft - Robust industrial application. MVB + Solid epoxy.\", \r\n layersDetail: [\r\n \"Layer 1: MVB (Anti-osmosis epoxy primer)\",\r\n \"Layer 2: 100% solid self-leveling epoxy (Zero solvent)\",\r\n \"Layer 3: High-resistance protective clear sealer\"\r\n ]\r\n },\r\n epoxy_metallique: { \r\n name: \"Metallic Epoxy ($16\/sq ft)\", \r\n calcType: 'sqft_rate',\r\n rate: 16, \r\n matCostRate: 0.45, \r\n prepTime: 0.018, \r\n applyTime: 0.035, \r\n coverage: 400, \r\n icon: '\ud83c\udfa8', \r\n desc: \"$16 \/ sq ft - High-gloss monolithic art. Mica pigments for marbled effects.\", \r\n layersDetail: [\r\n \"Layer 1: MVB base \/ dark primer coat\",\r\n \"Layer 2: Metallic epoxy with mica pigments (3D effect)\",\r\n \"Layer 3: UV-resistant transparent finish varnish\"\r\n ]\r\n },\r\n art_custom: { \r\n name: \"HD Design Vinyl (4 Layers)\", \r\n calcType: 'sqft_rate',\r\n rate: 22, \r\n matCostRate: 0.55, \r\n prepTime: 0.03, \r\n applyTime: 0.05, \r\n coverage: 400, \r\n icon: '\ud83d\udc41\ufe0f', \r\n desc: \"4-layer system: MVB, Epoxy, HD Vinyl print, and 2 polished Polyaspartic topcoats.\", \r\n layersDetail: [\r\n \"Layer 1: MVB (Moisture barrier)\",\r\n \"Layer 2: Epoxy adhesive base coat\",\r\n \"Layer 3: Large format HD decorative vinyl print\",\r\n \"Layers 4 & 5: Double polished high-gloss Polyaspartic varnish\"\r\n ]\r\n },\r\n poly_ciment: { \r\n name: \"Polyurethane-Cement\", \r\n calcType: 'sqft_rate',\r\n rate: 18, \r\n matCostRate: 0.60, \r\n prepTime: 0.03, \r\n applyTime: 0.04, \r\n coverage: 400, \r\n icon: '\ud83c\udf21\ufe0f', \r\n desc: \"Extreme thermal mortar. Resists from -40\u00b0C to +120\u00b0C.\", \r\n layersDetail: [\r\n \"Layer 1: Polyurethane primer anchor coat\",\r\n \"Layer 2: Steel trowel polyurethane-cement mortar (9-12mm)\",\r\n \"Layer 3: Waterproof and anti-bacterial finish sealer\"\r\n ]\r\n }\r\n };\r\n\r\n function initUI() {\r\n const systemsContainer = document.getElementById('systems-container');\r\n if(!systemsContainer) return;\r\n let sysHtml = '';\r\n for(let key in systemsData) {\r\n const s = systemsData[key];\r\n sysHtml += `<button data-sys=\"${key}\" class=\"system-btn p-5 rounded-2xl border-2 text-left transition-all flex items-center gap-4 ${state.system === key ? 'active border-brand-red bg-red-50 shadow-inner' : 'border-slate-300 bg-slate-50 hover:border-slate-400'} w-full\">\r\n <div class=\"p-3 rounded-xl text-2xl ${state.system === key ? 'bg-brand-red text-white' : 'bg-slate-300 text-slate-700'}\">${s.icon}<\/div>\r\n <div class=\"flex-1 italic font-bold\">\r\n <span class=\"font-black text-sm uppercase block mb-1 leading-none italic text-brand-dark\">${s.name}<\/span>\r\n <p class=\"text-xs text-slate-800 font-bold leading-relaxed\">${s.desc}<\/p>\r\n <\/div>\r\n <\/button>`;\r\n }\r\n systemsContainer.innerHTML = sysHtml;\r\n }\r\n\r\n function updateCalculations() {\r\n const sys = systemsData[state.system];\r\n const mult = state.isExpress ? 1.35 : 1;\r\n const totalArea = state.area;\r\n const kitsCount = Math.ceil(totalArea \/ 400);\r\n \r\n const layer5Container = document.getElementById('layer-5-container');\r\n if(state.system === 'polyurea_flakes') {\r\n layer5Container.classList.remove('hidden');\r\n } else {\r\n layer5Container.classList.add('hidden');\r\n state.hasLayer5 = false;\r\n }\r\n\r\n let matRaw = 0;\r\n let qtyLabelText = \"Product Kits \/ Boxes\";\r\n\r\n if (sys.calcType === 'layered_flakes') {\r\n const costPerKitSet = 220 + 220 + (2 * 145) + 280; \r\n matRaw = kitsCount * costPerKitSet;\r\n if (state.hasLayer5) {\r\n matRaw += totalArea * 3; \r\n }\r\n qtyLabelText = `${kitsCount} Kits (400 sq ft\/kit) + Flakes`;\r\n } else {\r\n let rate = sys.rate || 12;\r\n matRaw = totalArea * rate * sys.matCostRate;\r\n qtyLabelText = `${kitsCount} Resin Kits (400 sq ft\/kit)`;\r\n }\r\n\r\n document.getElementById('out-mat-qty-label').textContent = qtyLabelText;\r\n\r\n const receiptLayersList = document.getElementById('receipt-layers-list');\r\n let layersHtml = '';\r\n sys.layersDetail.forEach((layerText, idx) => {\r\n if(idx === 4 && state.system === 'polyurea_flakes' && !state.hasLayer5) return;\r\n layersHtml += `<li class=\"text-[11px] text-slate-700 font-bold flex items-start gap-2\"><span>\u2022<\/span> <span>${layerText}<\/span><\/li>`;\r\n });\r\n if(state.system === 'polyurea_flakes' && state.hasLayer5) {\r\n layersHtml += `<li class=\"text-[11px] text-brand-red font-black flex items-start gap-2\"><span>\u2022<\/span> <span>Option 5th Layer: Additional HD Polyaspartic topcoat (+$3\/sq ft)<\/span><\/li>`;\r\n }\r\n receiptLayersList.innerHTML = layersHtml;\r\n\r\n const matMargin = matRaw * 0.20;\r\n const matFinal = matRaw + matMargin;\r\n\r\n const totalManHours = totalArea * (sys.prepTime + sys.applyTime) * mult;\r\n const laborRaw = totalManHours * EXPERT_HOURLY_RATE;\r\n const laborExpertise = laborRaw * 0.25;\r\n const laborFinal = laborRaw + laborExpertise;\r\n\r\n const equipmentDeposit = 800;\r\n\r\n const smallCracks = parseInt(document.getElementById('crack-small').value) || 0;\r\n const medCracks = parseInt(document.getElementById('crack-med').value) || 0;\r\n const largeCracks = parseInt(document.getElementById('crack-large').value) || 0;\r\n const repairsCost = (state.condition === 'new') ? 0 : (smallCracks * 115) + (medCracks * 175) + (largeCracks * 250);\r\n\r\n const complianceSection = document.getElementById('receipt-compliance-section');\r\n let compliance = 0;\r\n if (state.projectType === 'commercial') {\r\n compliance = (matFinal + laborFinal) * 0.07;\r\n complianceSection.classList.remove('hidden');\r\n } else {\r\n complianceSection.classList.add('hidden');\r\n }\r\n\r\n const netSubtotal = matFinal + laborFinal + repairsCost + compliance;\r\n\r\n const tps = netSubtotal * 0.05;\r\n const tvq = netSubtotal * 0.09975;\r\n const grandTotal = netSubtotal + tps + tvq + equipmentDeposit; \r\n\r\n const dailyCapacity = state.experts * MAX_HOURS_PER_DAY;\r\n const layersCount = state.system === 'polyurea_flakes' ? (state.hasLayer5 ? 5 : 4) : 3;\r\n const dryingHours = (layersCount - 1) * 12; \r\n const workHours = totalManHours;\r\n const totalProjectHours = workHours + dryingHours;\r\n const daysRequired = Math.ceil(totalProjectHours \/ dailyCapacity);\r\n\r\n const fmt = (num) => new Intl.NumberFormat('en-US', { maximumFractionDigits: 0 }).format(num);\r\n\r\n document.getElementById('out-total').textContent = fmt(grandTotal);\r\n document.getElementById('out-net').textContent = '+' + fmt(netSubtotal - matRaw - laborRaw) + ' $';\r\n document.getElementById('out-days').textContent = daysRequired;\r\n document.getElementById('out-mat-raw').textContent = fmt(matRaw) + ' $';\r\n document.getElementById('out-mat-margin').textContent = '+' + fmt(matMargin) + ' $';\r\n document.getElementById('out-mat-final').textContent = fmt(matFinal) + ' $';\r\n document.getElementById('out-mat-qty').textContent = fmt(kitsCount) + ' Kits';\r\n\r\n document.getElementById('out-hours').textContent = Math.round(totalManHours);\r\n document.getElementById('out-lab-raw').textContent = fmt(laborRaw) + ' $';\r\n document.getElementById('out-lab-margin').textContent = '+' + fmt(laborExpertise) + ' $';\r\n document.getElementById('out-lab-final').textContent = fmt(laborFinal) + ' $';\r\n document.getElementById('out-deposit').textContent = fmt(equipmentDeposit) + ' $';\r\n document.getElementById('out-repairs').textContent = '+' + fmt(repairsCost) + ' $';\r\n document.getElementById('out-comp').textContent = '+' + fmt(compliance) + ' $';\r\n\r\n document.getElementById('out-sub').textContent = fmt(netSubtotal + equipmentDeposit) + ' $';\r\n document.getElementById('out-tps').textContent = '+' + fmt(tps) + ' $';\r\n document.getElementById('out-tvq').textContent = '+' + fmt(tvq) + ' $';\r\n document.getElementById('out-grand').textContent = fmt(grandTotal) + ' $';\r\n \r\n document.getElementById('timeline-logic').textContent = `12h Drying x ${layersCount-1} layers + Labor ${Math.round(totalManHours)}h`;\r\n document.getElementById('time-1').textContent = '12h Dry + Grinding';\r\n document.getElementById('time-2').textContent = '12h MVB Dry';\r\n document.getElementById('time-3').textContent = `${Math.round(totalManHours)}h Total Labor`;\r\n document.getElementById('time-total').textContent = Math.round(totalProjectHours) + ' Hours (Job + Drying)';\r\n }\r\n\r\n document.querySelectorAll('.type-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n state.projectType = this.getAttribute('data-type');\r\n document.querySelectorAll('.type-btn').forEach(b => {\r\n b.classList.remove('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md');\r\n b.classList.add('border-slate-300', 'text-slate-700', 'hover:bg-slate-200');\r\n });\r\n this.classList.add('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md');\r\n this.classList.remove('border-slate-300', 'text-slate-700', 'hover:bg-slate-200');\r\n updateCalculations();\r\n });\r\n });\r\n\r\n const inputArea = document.getElementById('input-area'); \r\n const rangeArea = document.getElementById('range-area');\r\n inputArea.addEventListener('input', function() { state.area = this.value; rangeArea.value = this.value; updateCalculations(); });\r\n rangeArea.addEventListener('input', function() { state.area = this.value; inputArea.value = this.value; updateCalculations(); });\r\n\r\n document.getElementById('systems-container').addEventListener('click', function(e) {\r\n const btn = e.target.closest('.system-btn'); if (!btn) return;\r\n state.system = btn.getAttribute('data-sys');\r\n document.querySelectorAll('.system-btn').forEach(b => {\r\n b.classList.remove('active', 'border-brand-red', 'bg-red-50', 'shadow-inner'); b.classList.add('border-slate-300', 'bg-slate-50', 'hover:border-slate-400');\r\n const iconDiv = b.querySelector('div div'); if(iconDiv) { iconDiv.classList.remove('bg-brand-red', 'text-white'); iconDiv.classList.add('bg-slate-300', 'text-slate-700'); }\r\n });\r\n btn.classList.add('active', 'border-brand-red', 'bg-red-50', 'shadow-inner'); btn.classList.remove('border-slate-300', 'bg-slate-50', 'hover:border-slate-400');\r\n const btnIconDiv = btn.querySelector('div div'); if(btnIconDiv) { btnIconDiv.classList.add('bg-brand-red', 'text-white'); btnIconDiv.classList.remove('bg-slate-300', 'text-slate-700'); }\r\n updateCalculations();\r\n });\r\n\r\n document.querySelectorAll('.expert-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n state.experts = parseInt(this.getAttribute('data-val'));\r\n document.querySelectorAll('.expert-btn').forEach(b => { b.classList.remove('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md'); b.classList.add('border-slate-300', 'text-slate-700', 'hover:bg-slate-200'); });\r\n this.classList.add('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md'); this.classList.remove('border-slate-300', 'text-slate-700', 'hover:bg-slate-200');\r\n updateCalculations();\r\n });\r\n });\r\n\r\n document.querySelectorAll('.cond-btn').forEach(btn => {\r\n btn.addEventListener('click', function() {\r\n state.condition = this.getAttribute('data-cond');\r\n document.querySelectorAll('.cond-btn').forEach(b => {\r\n b.classList.remove('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md');\r\n b.classList.add('border-slate-300', 'text-slate-700', 'hover:bg-slate-200');\r\n });\r\n this.classList.add('active', 'bg-brand-dark', 'border-brand-dark', 'text-white', 'shadow-md');\r\n this.classList.remove('border-slate-300', 'text-slate-700', 'hover:bg-slate-200');\r\n\r\n const cracksContainer = document.getElementById('cracks-container');\r\n if(state.condition === 'new') {\r\n cracksContainer.style.display = 'none';\r\n } else {\r\n cracksContainer.style.display = 'block';\r\n }\r\n updateCalculations();\r\n });\r\n });\r\n\r\n document.querySelectorAll('.crack-input').forEach(input => {\r\n input.addEventListener('input', function() {\r\n if(this.value < 0) this.value = 0;\r\n updateCalculations();\r\n });\r\n });\r\n\r\n document.getElementById('layer-5-container').addEventListener('click', function() {\r\n state.hasLayer5 = !state.hasLayer5;\r\n const toggleBg = document.getElementById('toggle-layer5-bg');\r\n const toggleDot = document.getElementById('toggle-layer5-dot');\r\n if(state.hasLayer5) {\r\n this.classList.add('border-brand-red', 'bg-red-50');\r\n toggleBg.classList.remove('bg-slate-300'); toggleBg.classList.add('bg-brand-red');\r\n toggleDot.classList.add('translate-x-6');\r\n } else {\r\n this.classList.remove('border-brand-red', 'bg-red-50');\r\n toggleBg.classList.remove('bg-brand-red'); toggleBg.classList.add('bg-slate-300');\r\n toggleDot.classList.remove('translate-x-6');\r\n }\r\n updateCalculations();\r\n });\r\n\r\n document.getElementById('btn-express').addEventListener('click', function() {\r\n state.isExpress = !state.isExpress;\r\n const toggleBg = document.getElementById('toggle-express-bg'); const toggleDot = document.getElementById('toggle-express-dot');\r\n if(state.isExpress) {\r\n this.classList.add('border-brand-red', 'bg-red-50');\r\n toggleBg.classList.remove('bg-slate-300'); toggleBg.classList.add('bg-brand-red'); toggleDot.classList.add('translate-x-6');\r\n } else {\r\n this.classList.remove('border-brand-red', 'bg-red-50');\r\n toggleBg.classList.remove('bg-brand-red'); toggleBg.classList.add('bg-slate-300'); toggleDot.classList.remove('translate-x-6');\r\n }\r\n updateCalculations();\r\n });\r\n\r\n document.getElementById('submission-form').addEventListener('submit', function(e) {\r\n e.preventDefault();\r\n const fname = document.getElementById('form-fname').value;\r\n const lname = document.getElementById('form-lname').value;\r\n const email = document.getElementById('form-email').value;\r\n const phone = document.getElementById('form-phone').value;\r\n const location = document.getElementById('form-location').value;\r\n const info = document.getElementById('form-info').value;\r\n const totalAmount = document.getElementById('out-grand').textContent;\r\n const systemName = systemsData[state.system].name;\r\n\r\n window.epoxyPendingPayload = {\r\n _subject: `New Quote Submission - ${fname} ${lname} - ${location}`,\r\n FullName: `${fname} ${lname}`,\r\n Email: email,\r\n Phone: phone,\r\n Location: location,\r\n ProjectType: state.projectType === 'residential' ? 'Residential' : 'Commercial',\r\n UnitsCount: 'N\/A',\r\n ClientNotes: info,\r\n TECH_Surface: `${state.area} sq ft`,\r\n TECH_System: systemName,\r\n TECH_ProductQty: document.getElementById('out-mat-qty').textContent,\r\n TECH_Slab: state.condition === 'new' ? 'New' : 'Used',\r\n TECH_CracksSmall: document.getElementById('crack-small').value,\r\n TECH_CracksMed: document.getElementById('crack-med').value,\r\n TECH_CracksLarge: document.getElementById('crack-large').value,\r\n PRICE_Subtotal: document.getElementById('out-sub').textContent,\r\n PRICE_Taxes: (parseFloat(document.getElementById('out-tps').textContent.replace(\/[^0-9.-]+\/g,\"\")) + parseFloat(document.getElementById('out-tvq').textContent.replace(\/[^0-9.-]+\/g,\"\"))).toFixed(2) + ' $',\r\n PRICE_GRAND_TOTAL: totalAmount\r\n };\r\n\r\n let summaryHtml = `\r\n <div class=\"bg-slate-100 p-5 rounded-xl border-2 border-slate-200\">\r\n <h4 class=\"font-black text-brand-dark uppercase text-[11px] tracking-widest mb-3\">Client<\/h4>\r\n <p><strong>Name:<\/strong> ${fname} ${lname} | <strong>Phone:<\/strong> ${phone}<\/p>\r\n <p><strong>Email:<\/strong> ${email} | <strong>Location:<\/strong> ${location}<\/p>\r\n <p class=\"mt-2\"><strong>Notes:<\/strong> ${info}<\/p>\r\n <\/div>\r\n <div class=\"mt-5 p-4 bg-red-50 rounded-xl border-2 border-red-200 text-xl font-black text-brand-dark flex justify-between items-center\">\r\n <span>Estimated Total (${systemName}) :<\/span>\r\n <span class=\"text-brand-red\">${totalAmount}<\/span>\r\n <\/div>\r\n `;\r\n document.getElementById('verify-details').innerHTML = summaryHtml;\r\n\r\n const modal = document.getElementById('verify-modal');\r\n modal.classList.remove('hidden');\r\n setTimeout(() => modal.classList.remove('opacity-0'), 10);\r\n });\r\n\r\n function closeModal() {\r\n const modal = document.getElementById('verify-modal');\r\n modal.classList.add('opacity-0');\r\n setTimeout(() => modal.classList.add('hidden'), 300);\r\n }\r\n\r\n document.getElementById('close-modal').addEventListener('click', closeModal);\r\n document.getElementById('btn-cancel-send').addEventListener('click', closeModal);\r\n \r\n document.getElementById('btn-confirm-send').addEventListener('click', async function() {\r\n const btn = this;\r\n const originalText = btn.innerHTML;\r\n btn.innerHTML = '<span class=\"text-xl animate-spin\">\u23f3<\/span> <span>Sending...<\/span>';\r\n btn.disabled = true;\r\n\r\n try {\r\n let endpointUrl = '\/wp-admin\/admin-ajax.php';\r\n if (typeof ajaxurl !== 'undefined') endpointUrl = ajaxurl;\r\n\r\n const formData = new FormData();\r\n formData.append('action', 'epoxy_submit_quote');\r\n formData.append('payload', JSON.stringify(window.epoxyPendingPayload));\r\n\r\n const fileExample = document.getElementById('form-file-example').files[0];\r\n const filePlan = document.getElementById('form-file-plan').files[0];\r\n if (fileExample) formData.append('file_example', fileExample);\r\n if (filePlan) formData.append('file_plan', filePlan);\r\n\r\n const response = await fetch(endpointUrl, {\r\n method: 'POST',\r\n body: formData\r\n });\r\n\r\n const textResult = await response.text();\r\n let result;\r\n\r\n try {\r\n result = JSON.parse(textResult);\r\n } catch (e) {\r\n if (textResult.trim() === '0' || textResult.includes('<body') || textResult.includes('<!DOCTYPE')) {\r\n throw new Error(\"PHP backend bridge not found. Please ensure your WordPress functions.php snippet is active.\");\r\n }\r\n throw new Error(\"Invalid server response: \" + textResult.substring(0, 100));\r\n }\r\n\r\n if (response.ok && result.success) {\r\n btn.innerHTML = '<span class=\"text-xl\">\u2705<\/span> <span>Sent successfully!<\/span>';\r\n btn.classList.remove('bg-brand-red', 'hover:bg-red-800');\r\n btn.classList.add('bg-green-600', 'hover:bg-green-700');\r\n\r\n setTimeout(() => {\r\n closeModal();\r\n btn.innerHTML = originalText;\r\n btn.classList.remove('bg-green-600', 'hover:bg-green-700');\r\n btn.classList.add('bg-brand-red', 'hover:bg-red-800');\r\n btn.disabled = false;\r\n document.getElementById('submission-form').reset();\r\n }, 2500);\r\n } else {\r\n throw new Error(result.data || 'Unknown server error.');\r\n }\r\n\r\n } catch (error) {\r\n console.error(error);\r\n alert(\"Sending Error:\\n\\n\" + error.message);\r\n btn.innerHTML = originalText;\r\n btn.disabled = false;\r\n }\r\n });\r\n\r\n initUI(); \r\n updateCalculations();\r\n}\r\n\r\nif (document.readyState === 'loading') {\r\n document.addEventListener('DOMContentLoaded', initEpoxyApp);\r\n} else {\r\n initEpoxyApp();\r\n}\r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Industrial Epoxy Calculator & Strategy Dashboard \ud83e\uddeeLogistics Configurations Project Type Residential Commercial Surface Area (sq ft) Max: 500,000 Deployed Crew (Experts @ $65\/h) 2 4 6 8 Slab Condition Used (Existing) New \ud83e\ude79 Repair (Cracks \/ Imperfections) Small (< 35" long, < 2.5" deep) $115 \/ unit Medium (35-55" long, 3" deep) $175 \/ unit […]<\/p>\n","protected":false},"author":1,"featured_media":6838,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-6998","page","type-page","status-publish","has-post-thumbnail","hentry"],"_links":{"self":[{"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/pages\/6998","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/comments?post=6998"}],"version-history":[{"count":3,"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/pages\/6998\/revisions"}],"predecessor-version":[{"id":7479,"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/pages\/6998\/revisions\/7479"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/media\/6838"}],"wp:attachment":[{"href":"https:\/\/epoxy.express\/en\/wp-json\/wp\/v2\/media?parent=6998"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}