Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>KiwiSeal Roofing Cost Calculator</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <script> | |
| tailwind.config = { | |
| theme: { | |
| extend: { | |
| colors: { | |
| kiwiBlue: '#142342', | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| .roof-type:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| transition: width 0.5s ease; | |
| } | |
| .tooltip { | |
| position: relative; | |
| display: inline-block; | |
| } | |
| .tooltip .tooltiptext { | |
| visibility: hidden; | |
| width: 200px; | |
| background-color: #142342; | |
| color: white; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| margin-left: -100px; | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltiptext { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8 max-w-6xl"> | |
| <!-- Header --> | |
| <header class="text-center mb-8"> | |
| <div class="flex justify-center items-center mb-4"> | |
| <div class="w-16 h-16 rounded-full bg-kiwiBlue flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-home text-2xl"></i> | |
| </div> | |
| <h1 class="text-3xl font-bold text-kiwiBlue">Kiwiseal Roofing Cost Calculator</h1> | |
| </div> | |
| <p class="text-gray-600">Compare the estimated cost of applying Kiwiseal to re-roofing your property</p> | |
| </header> | |
| <!-- Progress Bar --> | |
| <div class="mb-8"> | |
| <div class="flex justify-between mb-2"> | |
| <span class="text-sm font-medium text-kiwiBlue">Progress</span> | |
| <span class="text-sm font-medium" id="progressText">0%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-kiwiBlue progress-bar rounded-full" id="progressBar" style="width: 0%"></div> | |
| </div> | |
| </div> | |
| <!-- Calculator Form --> | |
| <div class="bg-white rounded-lg shadow-lg p-6 mb-8"> | |
| <form id="roofCalculator"> | |
| <!-- Step 1: Roof Type --> | |
| <div id="step1" class="step"> | |
| <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center"> | |
| <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">1</span> | |
| Identify Your Roof Surface Type | |
| </h2> | |
| <p class="text-gray-600 mb-6">Select the option that best describes your roof:</p> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <!-- Iron Roof Long Run --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('IRON_ROOF_LONG_RUN')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-grip-lines"></i> | |
| </div> | |
| <h3 class="font-semibold">IRON ROOF LONG RUN</h3> | |
| </div> | |
| </div> | |
| <!-- Tray Commercial Roofing --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('TRAY_COMMERCIAL')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-th"></i> | |
| </div> | |
| <h3 class="font-semibold">TRAY COMMERCIAL ROOFING</h3> | |
| </div> | |
| </div> | |
| <!-- Iron Roof Short Sheets --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('IRON_ROOF_SHORT_SHEETS')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-grip-lines-vertical"></i> | |
| </div> | |
| <h3 class="font-semibold">IRON ROOF SHORT SHEETS</h3> | |
| </div> | |
| </div> | |
| <!-- Butynol --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('BUTYNOL')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-shield-alt"></i> | |
| </div> | |
| <h3 class="font-semibold">BUTYNOL</h3> | |
| </div> | |
| </div> | |
| <!-- Concrete Tiles --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('CONCRETE_TILES')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-th-large"></i> | |
| </div> | |
| <h3 class="font-semibold">CONCRETE TILES</h3> | |
| </div> | |
| </div> | |
| <!-- Decromastic Tiles --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('DECROMASTIC_TILES')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-border-style"></i> | |
| </div> | |
| <h3 class="font-semibold">DECROMASTIC TILES</h3> | |
| </div> | |
| </div> | |
| <!-- Asbestos Roofing --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('ASBESTOS')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-exclamation-triangle"></i> | |
| </div> | |
| <h3 class="font-semibold">ASBESTOS ROOFING</h3> | |
| </div> | |
| </div> | |
| <!-- Internal Gutters --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('INTERNAL_GUTTERS')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-water"></i> | |
| </div> | |
| <h3 class="font-semibold">INTERNAL GUTTERS</h3> | |
| </div> | |
| </div> | |
| <!-- Asphalt Shingles --> | |
| <div class="roof-type p-4 border border-gray-200 rounded-lg cursor-pointer transition-all duration-300" onclick="selectRoofType('ASPHALT_SHINGLES')"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-kiwiBlue bg-opacity-10 rounded-full flex items-center justify-center text-kiwiBlue mr-3"> | |
| <i class="fas fa-thumbtack"></i> | |
| </div> | |
| <h3 class="font-semibold">ASPHALT SHINGLES</h3> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="hidden" id="selectedRoofType"> | |
| <div class="bg-kiwiBlue bg-opacity-10 p-3 rounded-lg flex items-center"> | |
| <i class="fas fa-check-circle text-kiwiBlue text-xl mr-3"></i> | |
| <span class="font-medium" id="selectedRoofTypeText"></span> | |
| </div> | |
| </div> | |
| <div class="flex justify-end mt-6"> | |
| <button type="button" onclick="nextStep('step1', 'step2')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step1NextBtn" disabled> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 2: Roof Area --> | |
| <div id="step2" class="step hidden"> | |
| <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center"> | |
| <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">2</span> | |
| Enter Your Roof Surface Area | |
| </h2> | |
| <p class="text-gray-600 mb-6">Please provide the total surface area of your roof in square meters (m²):</p> | |
| <p class="text-sm text-gray-500 mb-6">Tip: Be sure to account for your eaves (usually this is an extra 10%), or you can calculate the exact top-down size at <a href="https://earth.google.com/" target="_blank" class="text-kiwiBlue hover:underline">Google Earth</a>.</p> | |
| <div class="mb-6 flex flex-col md:flex-row gap-6 items-start"> | |
| <div class="flex-1 max-w-md"> | |
| <label for="roofArea" class="block text-gray-700 mb-2">Roof Area (m²)</label> | |
| <div class="relative"> | |
| <input type="number" id="roofArea" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kiwiBlue focus:border-kiwiBlue" placeholder="e.g., 150" min="1"> | |
| <div class="absolute inset-y-0 right-0 flex items-center pr-3 pointer-events-none"> | |
| <span class="text-gray-500">m²</span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex-1 max-w-md"> | |
| <img src="https://d26tpo4cm8sb6k.cloudfront.net/img/typical-roof.png" alt="Typical Roof Diagram" class="w-full h-auto rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button type="button" onclick="prevStep('step2', 'step1')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button type="button" onclick="nextStep('step2', 'step3')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step2NextBtn" disabled> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 3: Roof Pitch --> | |
| <div id="step3" class="step hidden"> | |
| <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center"> | |
| <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">3</span> | |
| Select Your Roof Pitch | |
| </h2> | |
| <p class="text-gray-600 mb-6">Roof pitch affects the actual surface area that needs to be covered:</p> | |
| <div class="mb-6 flex flex-col md:flex-row gap-6 items-start"> | |
| <div class="flex-1 max-w-md"> | |
| <label for="roofPitch" class="block text-gray-700 mb-2">Roof Pitch</label> | |
| <select id="roofPitch" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-kiwiBlue focus:border-kiwiBlue"> | |
| <option value="">Select pitch...</option> | |
| <option value="1.003">1/12 (4.8°)</option> | |
| <option value="1.014">2/12 (9.5°)</option> | |
| <option value="1.031">3/12 (14.0°)</option> | |
| <option value="1.054">4/12 (18.4°)</option> | |
| <option value="1.083">5/12 (22.6°)</option> | |
| <option value="1.118">6/12 (26.6°)</option> | |
| <option value="1.158">7/12 (30.3°)</option> | |
| <option value="1.202">8/12 (33.7°)</option> | |
| <option value="1.250">9/12 (36.9°)</option> | |
| <option value="1.302">10/12 (39.8°)</option> | |
| <option value="1.357">11/12 (42.5°)</option> | |
| <option value="1.414">12/12 (45.0°)</option> | |
| <option value="1.474">13/12 (47.3°)</option> | |
| <option value="1.537">14/12 (49.4°)</option> | |
| <option value="1.601">15/12 (51.3°)</option> | |
| <option value="1.667">16/12 (53.1°)</option> | |
| <option value="1.734">17/12 (54.8°)</option> | |
| <option value="1.803">18/12 (56.3°)</option> | |
| <option value="1.873">19/12 (57.7°)</option> | |
| <option value="1.944">20/12 (59.0°)</option> | |
| <option value="2.016">21/12 (60.3°)</option> | |
| <option value="2.088">22/12 (61.4°)</option> | |
| <option value="2.162">23/12 (62.4°)</option> | |
| <option value="2.236">24/12 (63.4°)</option> | |
| </select> | |
| </div> | |
| <div class="flex-1 max-w-md"> | |
| <img src="https://d26tpo4cm8sb6k.cloudfront.net/img/roof-pitch.png" alt="Roof Pitch Diagram" class="w-full h-auto rounded-lg shadow-md"> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button type="button" onclick="prevStep('step3', 'step2')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button type="button" onclick="nextStep('step3', 'step4')" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step3NextBtn" disabled> | |
| Next <i class="fas fa-arrow-right ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Step 4: Roof Condition --> | |
| <div id="step4" class="step hidden"> | |
| <h2 class="text-xl font-bold text-kiwiBlue mb-4 flex items-center"> | |
| <span class="w-8 h-8 bg-kiwiBlue text-white rounded-full flex items-center justify-center mr-3">4</span> | |
| Roof Condition Repair Estimate | |
| </h2> | |
| <p class="text-gray-600 mb-6">Is the roof leaking, older than 15 years, or showing significant signs of needing repair?</p> | |
| <div class="mb-6"> | |
| <div class="flex items-center mb-4"> | |
| <input type="radio" id="conditionYes" name="roofCondition" value="yes" class="w-5 h-5 text-kiwiBlue focus:ring-kiwiBlue"> | |
| <label for="conditionYes" class="ml-2 text-gray-700">Yes</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" id="conditionNo" name="roofCondition" value="no" class="w-5 h-5 text-kiwiBlue focus:ring-kiwiBlue"> | |
| <label for="conditionNo" class="ml-2 text-gray-700">No</label> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-6"> | |
| <button type="button" onclick="prevStep('step4', 'step3')" class="text-kiwiBlue px-6 py-2 rounded-lg border border-kiwiBlue hover:bg-kiwiBlue hover:bg-opacity-10 transition-all"> | |
| <i class="fas fa-arrow-left mr-2"></i> Back | |
| </button> | |
| <button type="button" onclick="calculateResults()" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all disabled:opacity-50" id="step4NextBtn" disabled> | |
| Calculate Results <i class="fas fa-calculator ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </form> | |
| </div> | |
| <!-- Results Section --> | |
| <div id="results" class="bg-white rounded-lg shadow-lg p-6 hidden"> | |
| <h2 class="text-xl font-bold text-kiwiBlue mb-6 flex items-center"> | |
| <i class="fas fa-chart-bar text-kiwiBlue mr-3"></i> Your Roofing Cost Comparison | |
| </h2> | |
| <div class="bg-kiwiBlue bg-opacity-10 p-4 rounded-lg mb-6"> | |
| <div class="flex items-center"> | |
| <div class="w-12 h-12 bg-kiwiBlue rounded-full flex items-center justify-center text-white mr-4"> | |
| <i class="fas fa-piggy-bank text-xl"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-bold text-kiwiBlue">Potential Savings</h4> | |
| <p class="text-xl font-bold text-green-600" id="resultSavings"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2">Cost Comparison:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-green-50 border border-green-100 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-green-100 rounded-full flex items-center justify-center text-green-600 mr-3"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| <h4 class="font-bold text-green-700">Kiwiseal Total Cost Estimate</h4> | |
| </div> | |
| <p class="text-2xl font-bold text-green-600 mb-3" id="resultKiwiSealTotal"></p> | |
| <h4 class="font-bold text-green-700 mb-2">Pros:</h4> | |
| <ul class="list-disc pl-5 space-y-1 text-sm"> | |
| <li>✔️ Cost-effective alternative to full re-roofing</li> | |
| <li>✔️ Extends roof lifespan significantly</li> | |
| <li>✔️ Less disruptive and faster application</li> | |
| <li>✔️ Environmentally friendly with less waste</li> | |
| <li>✔️ Provides a seamless, waterproof finish</li> | |
| <li>✔️ Excellent for leak prevention and sealing</li> | |
| <li>✔️ Superior elastomeric properties with 250-320% elongation</li> | |
| <li>✔️ Can be applied over various existing roof types</li> | |
| <li>✔️ 10-year product warranty for long-term peace of mind</li> | |
| <li>✔️ Virtually VOC-free (Volatile Organic Compounds)</li> | |
| <li>✔️ Safe for water tank collection</li> | |
| </ul> | |
| </div> | |
| <div class="bg-blue-50 border border-blue-100 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center text-blue-600 mr-3"> | |
| <i class="fas fa-home"></i> | |
| </div> | |
| <h4 class="font-bold text-blue-700">Re-roofing Total Cost Estimate</h4> | |
| </div> | |
| <p class="text-2xl font-bold text-blue-600 mb-3" id="resultReroofingTotal"></p> | |
| <h4 class="font-bold text-blue-700 mb-2">Pros:</h4> | |
| <ul class="list-disc pl-5 space-y-1 text-sm"> | |
| <li>✔️ Brand new roof with fresh look</li> | |
| <li>✔️ Opportunity to change roof material</li> | |
| </ul> | |
| <h4 class="font-bold text-blue-700 mt-3 mb-2">Cons:</h4> | |
| <ul class="list-disc pl-5 space-y-1 text-sm"> | |
| <li>❌ High upfront cost</li> | |
| <li>❌ Disruptive process with noise/debris</li> | |
| <li>❌ Longer project duration, impacting daily life</li> | |
| <li>❌ Generates substantial waste, impacting the environment</li> | |
| <li>❌ Potential for unexpected structural issues to increase costs during replacement</li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="text-center mb-4"> | |
| <a href="https://kiwisealroofing.co.nz/contactus" | |
| class="inline-block bg-kiwiBlue text-white font-bold px-6 py-3 rounded-lg hover:bg-opacity-90 transition-all"> | |
| Get Free Roof Assessment and Quote Now! | |
| </a> | |
| </div> | |
| <div class="mt-4 text-center text-sm text-gray-500 mb-6"> | |
| <p>* This is an average cost estimate and subject to variation based on repairs required and assessment requirements.</p> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2">Selected Options:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Roof Type</p> | |
| <p class="font-medium" id="resultRoofType"></p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Roof Area</p> | |
| <p class="font-medium" id="resultRoofArea"></p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Roof Pitch</p> | |
| <p class="font-medium" id="resultRoofPitch"></p> | |
| </div> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Roof Condition Repair Needed?</p> | |
| <p class="font-medium" id="resultRoofCondition"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-semibold text-gray-700 mb-2">Calculations:</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div class="bg-gray-50 p-3 rounded-lg"> | |
| <p class="text-sm text-gray-500">Adjusted Roof Area</p> | |
| <p class="font-medium" id="resultAdjustedArea"></p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-center"> | |
| <button onclick="resetCalculator()" class="bg-kiwiBlue text-white px-6 py-2 rounded-lg hover:bg-opacity-90 transition-all"> | |
| <i class="fas fa-redo mr-2"></i> Start New Calculation | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Roof type prices (hidden until calculation) | |
| const roofPrices = { | |
| 'IRON_ROOF_LONG_RUN': { kiwiSeal: 55, reroofing: 200 }, | |
| 'TRAY_COMMERCIAL': { kiwiSeal: 75, reroofing: 200 }, | |
| 'IRON_ROOF_SHORT_SHEETS': { kiwiSeal: 55, reroofing: 200 }, | |
| 'BUTYNOL': { kiwiSeal: 150, reroofing: 400 }, | |
| 'CONCRETE_TILES': { kiwiSeal: 55, reroofing: 200 }, | |
| 'DECROMASTIC_TILES': { kiwiSeal: 55, reroofing: 200 }, | |
| 'ASBESTOS': { kiwiSeal: 80, reroofing: 200 }, | |
| 'INTERNAL_GUTTERS': { kiwiSeal: 150, reroofing: 400 }, | |
| 'ASPHALT_SHINGLES': { kiwiSeal: 70, reroofing: 200 } | |
| }; | |
| // Roof type display names | |
| const roofDisplayNames = { | |
| 'IRON_ROOF_LONG_RUN': 'Iron Roof Long Run', | |
| 'TRAY_COMMERCIAL': 'Tray Commercial Roofing', | |
| 'IRON_ROOF_SHORT_SHEETS': 'Iron Roof Short Sheets', | |
| 'BUTYNOL': 'Butynol', | |
| 'CONCRETE_TILES': 'Concrete Tiles', | |
| 'DECROMASTIC_TILES': 'Decromastic Tiles', | |
| 'ASBESTOS': 'Asbestos Roofing', | |
| 'INTERNAL_GUTTERS': 'Internal Gutters', | |
| 'ASPHALT_SHINGLES': 'Asphalt Shingles' | |
| }; | |
| // Current step tracking | |
| let currentStep = 1; | |
| let selectedRoofType = null; | |
| // Update progress bar | |
| function updateProgress(step) { | |
| const progress = (step / 4) * 100; | |
| document.getElementById('progressBar').style.width = `${progress}%`; | |
| document.getElementById('progressText').textContent = `${progress}%`; | |
| } | |
| // Select roof type | |
| function selectRoofType(type) { | |
| // Remove active class from all roof types | |
| document.querySelectorAll('.roof-type').forEach(el => { | |
| el.classList.remove('border-kiwiBlue', 'border-2'); | |
| el.classList.add('border-gray-200'); | |
| }); | |
| // Add active class to selected roof type | |
| const selectedEl = document.querySelector(`[onclick="selectRoofType('${type}')"]`); | |
| selectedEl.classList.remove('border-gray-200'); | |
| selectedEl.classList.add('border-kiwiBlue', 'border-2'); | |
| // Update selected roof type display | |
| selectedRoofType = type; | |
| document.getElementById('selectedRoofTypeText').textContent = roofDisplayNames[type]; | |
| document.getElementById('selectedRoofType').classList.remove('hidden'); | |
| // Enable next button | |
| document.getElementById('step1NextBtn').disabled = false; | |
| } | |
| // Next step | |
| function nextStep(currentId, nextId) { | |
| // Validate inputs before proceeding | |
| if (currentId === 'step2') { | |
| const roofArea = document.getElementById('roofArea').value; | |
| if (!roofArea || isNaN(roofArea) || roofArea <= 0) { | |
| alert('Please enter a valid roof area'); | |
| return; | |
| } | |
| } else if (currentId === 'step3') { | |
| const roofPitch = document.getElementById('roofPitch').value; | |
| if (!roofPitch) { | |
| alert('Please select a roof pitch'); | |
| return; | |
| } | |
| } else if (currentId === 'step4') { | |
| const condition = document.querySelector('input[name="roofCondition"]:checked'); | |
| if (!condition) { | |
| alert('Please select a roof condition'); | |
| return; | |
| } | |
| } | |
| // Hide current step and show next step | |
| document.getElementById(currentId).classList.add('hidden'); | |
| document.getElementById(nextId).classList.remove('hidden'); | |
| // Update progress | |
| currentStep = parseInt(nextId.replace('step', '')); | |
| updateProgress(currentStep); | |
| // Enable/disable next buttons based on inputs | |
| if (currentId === 'step1') { | |
| document.getElementById('roofArea').addEventListener('input', function() { | |
| document.getElementById('step2NextBtn').disabled = !this.value; | |
| }); | |
| } else if (currentId === 'step2') { | |
| document.getElementById('roofPitch').addEventListener('change', function() { | |
| document.getElementById('step3NextBtn').disabled = !this.value; | |
| }); | |
| } else if (currentId === 'step3') { | |
| document.querySelectorAll('input[name="roofCondition"]').forEach(radio => { | |
| radio.addEventListener('change', function() { | |
| document.getElementById('step4NextBtn').disabled = false; | |
| }); | |
| }); | |
| } | |
| } | |
| // Previous step | |
| function prevStep(currentId, prevId) { | |
| document.getElementById(currentId).classList.add('hidden'); | |
| document.getElementById(prevId).classList.remove('hidden'); | |
| currentStep = parseInt(prevId.replace('step', '')); | |
| updateProgress(currentStep); | |
| } | |
| // Calculate results | |
| function calculateResults() { | |
| // Get all input values | |
| const roofArea = parseFloat(document.getElementById('roofArea').value); | |
| const pitchFactor = parseFloat(document.getElementById('roofPitch').value); | |
| const condition = document.querySelector('input[name="roofCondition"]:checked').value; | |
| // Calculate adjusted area | |
| const adjustedArea = roofArea * pitchFactor; | |
| // Get prices for selected roof type | |
| const prices = roofPrices[selectedRoofType]; | |
| let kiwiSealRate = prices.kiwiSeal; | |
| // Apply condition surcharge if needed | |
| if (condition === 'yes') { | |
| kiwiSealRate *= 1.3; | |
| } | |
| // Calculate totals with 15% addition | |
| const kiwiSealTotal = (adjustedArea * kiwiSealRate) * 1.15; | |
| const reroofingTotal = (adjustedArea * prices.reroofing) * 1.15; | |
| const savings = reroofingTotal - kiwiSealTotal; | |
| // Display results | |
| document.getElementById('resultRoofType').textContent = roofDisplayNames[selectedRoofType]; | |
| document.getElementById('resultRoofArea').textContent = `${roofArea.toFixed(2)} m²`; | |
| document.getElementById('resultRoofPitch').textContent = document.getElementById('roofPitch').options[document.getElementById('roofPitch').selectedIndex].text; | |
| document.getElementById('resultRoofCondition').textContent = condition === 'yes' ? 'Yes' : 'No'; | |
| document.getElementById('resultAdjustedArea').textContent = `${adjustedArea.toFixed(2)} m²`; | |
| document.getElementById('resultKiwiSealTotal').textContent = `$${kiwiSealTotal.toFixed(2)}`; | |
| document.getElementById('resultReroofingTotal').textContent = `$${reroofingTotal.toFixed(2)}`; | |
| // Format savings | |
| if (savings >= 0) { | |
| document.getElementById('resultSavings').textContent = `Save $${savings.toFixed(2)} with KiwiSeal`; | |
| document.getElementById('resultSavings').classList.remove('text-red-600'); | |
| document.getElementById('resultSavings').classList.add('text-green-600'); | |
| } else { | |
| document.getElementById('resultSavings').textContent = `Additional cost of $${Math.abs(savings).toFixed(2)} with KiwiSeal`; | |
| document.getElementById('resultSavings').classList.remove('text-green-600'); | |
| document.getElementById('resultSavings').classList.add('text-red-600'); | |
| } | |
| // Hide form and show results | |
| document.getElementById('roofCalculator').classList.add('hidden'); | |
| document.getElementById('results').classList.remove('hidden'); | |
| } | |
| // Reset calculator | |
| function resetCalculator() { | |
| // Reset form | |
| document.getElementById('roofCalculator').reset(); | |
| document.getElementById('roofCalculator').classList.remove('hidden'); | |
| document.getElementById('results').classList.add('hidden'); | |
| document.getElementById('selectedRoofType').classList.add('hidden'); | |
| document.querySelectorAll('.roof-type').forEach(el => { | |
| el.classList.remove('border-kiwiBlue', 'border-2'); | |
| el.classList.add('border-gray-200'); | |
| }); | |
| // Reset variables | |
| selectedRoofType = null; | |
| currentStep = 1; | |
| updateProgress(currentStep); | |
| // Show first step | |
| document.querySelectorAll('.step').forEach(step => { | |
| step.classList.add('hidden'); | |
| }); | |
| document.getElementById('step1').classList.remove('hidden'); | |
| // Reset buttons | |
| document.getElementById('step1NextBtn').disabled = true; | |
| } | |
| // Initialize | |
| updateProgress(1); | |
| </script> | |
| <!-- Contact Link Section --> | |
| <div class="bg-kiwiBlue text-white py-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <h3 class="text-2xl font-bold mb-4">Ready to get started?</h3> | |
| <a href="https://kiwisealroofing.co.nz/contactus" | |
| class="inline-block bg-white text-kiwiBlue font-bold px-6 py-3 rounded-lg hover:bg-gray-100 transition-all"> | |
| Get Free Roof Assessment and Quote Now! | |
| </a> | |
| </div> | |
| </div> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Gazmo08/roofing-calculator" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |