| <!DOCTYPE html> |
| <html lang="en" class="dark"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Estimate - RoofPrint Wizard</title> |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script> |
| tailwind.config = { |
| darkMode: 'class', |
| theme: { |
| extend: { |
| colors: { |
| primary: { |
| 500: '#f43f5e', |
| }, |
| secondary: { |
| 500: '#f97316', |
| } |
| } |
| } |
| } |
| } |
| </script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| </head> |
| <body class="bg-gray-900 min-h-screen text-gray-100"> |
| |
| <nav class="bg-gray-800 border-b border-gray-700 px-4 py-3"> |
| <div class="max-w-7xl mx-auto flex justify-between items-center"> |
| <div class="flex items-center space-x-2"> |
| <a href="index.html"> |
| <i data-feather="home" class="text-primary-500"></i> |
| </a> |
| <a href="index.html" class="text-xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-primary-500 to-secondary-500">RoofPrint Wizard</a> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <a href="projects.html" class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all"> |
| <i data-feather="folder"></i> |
| <span>My Projects</span> |
| </a> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all"> |
| <i data-feather="download"></i> |
| <span>Export Estimate</span> |
| </button> |
| <a href="index.html" class="bg-primary-500 hover:bg-primary-600 text-white px-4 py-2 rounded-lg flex items-center space-x-2 transition-all"> |
| <i data-feather="upload"></i> |
| <span>New Upload</span> |
| </a> |
| </div> |
| </div> |
| </nav> |
|
|
| |
| <div class="max-w-7xl mx-auto px-4 py-8"> |
| <div class="flex flex-col lg:flex-row gap-8"> |
| |
| <div class="flex-1"> |
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6"> |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> |
| <div> |
| <h2 class="text-2xl font-bold mb-2">Downtown Office Complex Roof Replacement</h2> |
| <div class="flex flex-wrap gap-2"> |
| <span class="bg-gray-700 text-primary-500 px-3 py-1 rounded-full text-sm font-medium">Commercial</span> |
| <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm font-medium">Flat Roof</span> |
| <span class="bg-gray-700 text-gray-300 px-3 py-1 rounded-full text-sm font-medium">TPO Membrane</span> |
| </div> |
| </div> |
| <div class="mt-4 md:mt-0"> |
| <p class="text-gray-400">Estimate Date: <span class="text-white">May 15, 2023</span></p> |
| <p class="text-gray-400">Estimate #: <span class="text-white">RPW-2023-0015</span></p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700 mb-6"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="clipboard" class="mr-2 text-primary-500"></i> |
| Project Summary |
| </h3> |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <p class="text-gray-400 text-sm">Total Area</p> |
| <p class="text-2xl font-bold">15,240<span class="text-lg"> sq ft</span></p> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <p class="text-gray-400 text-sm">Materials Cost</p> |
| <p class="text-2xl font-bold">$24,385<span class="text-lg"></span></p> |
| </div> |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <p class="text-gray-400 text-sm">Total Estimate</p> |
| <p class="text-2xl font-bold text-primary-500">$38,752<span class="text-lg"></span></p> |
| </div> |
| </div> |
| <div class="mt-6"> |
| <h4 class="font-medium mb-2">Extracted Notes</h4> |
| <div class="bg-gray-700 rounded-lg p-4"> |
| <p class="text-gray-300">• Existing roof to be removed and disposed of properly</p> |
| <p class="text-gray-300">• New 60-mil TPO membrane to be installed</p> |
| <p class="text-gray-300">• Includes 5-year labor warranty</p> |
| <p class="text-gray-300">• Projected completion within 18 working days</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <div class="flex justify-between items-center mb-6"> |
| <h3 class="text-xl font-semibold flex items-center"> |
| <i data-feather="dollar-sign" class="mr-2 text-primary-500"></i> |
| Cost Breakdown |
| </h3> |
| <div class="flex space-x-2"> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg text-sm flex items-center space-x-1"> |
| <i data-feather="edit-2" class="w-4 h-4"></i> |
| <span>Customize</span> |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 text-white px-3 py-1 rounded-lg text-sm flex items-center space-x-1"> |
| <i data-feather="upload" class="w-4 h-4"></i> |
| <span>Import Pricing</span> |
| </button> |
| </div> |
| </div> |
|
|
| <div class="overflow-x-auto"> |
| <table class="w-full"> |
| <thead> |
| <tr class="border-b border-gray-700 text-left text-gray-400"> |
| <th class="pb-3 pl-2">Item</th> |
| <th class="pb-3">Qty</th> |
| <th class="pb-3">Unit</th> |
| <th class="pb-3">Unit Cost</th> |
| <th class="pb-3 pr-2 text-right">Total</th> |
| </tr> |
| </thead> |
| <tbody> |
| |
| <tr class="border-b border-gray-800"> |
| <td colspan="5" class="pt-4 pb-2 pl-2 font-semibold text-primary-500">MATERIALS</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">TPO Membrane (60 mil)</td> |
| <td class="py-3">15,240</td> |
| <td class="py-3">sq ft</td> |
| <td class="py-3">$1.60</td> |
| <td class="py-3 pr-2 text-right">$24,384.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Insulation Board</td> |
| <td class="py-3">15,240</td> |
| <td class="py-3">sq ft</td> |
| <td class="py-3">$0.45</td> |
| <td class="py-3 pr-2 text-right">$6,858.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Fasteners</td> |
| <td class="py-3">1,200</td> |
| <td class="py-3">each</td> |
| <td class="py-3">$0.12</td> |
| <td class="py-3 pr-2 text-right">$144.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Flashing</td> |
| <td class="py-3">320</td> |
| <td class="py-3">lf</td> |
| <td class="py-3">$4.50</td> |
| <td class="py-3 pr-2 text-right">$1,440.00</td> |
| </tr> |
| |
| |
| <tr class="border-b border-gray-800"> |
| <td colspan="5" class="pt-4 pb-2 pl-2 font-semibold text-primary-500">LABOR</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Roof Removal</td> |
| <td class="py-3">15,240</td> |
| <td class="py-3">sq ft</td> |
| <td class="py-3">$0.25</td> |
| <td class="py-3 pr-2 text-right">$3,810.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Installation</td> |
| <td class="py-3">15,240</td> |
| <td class="py-3">sq ft</td> |
| <td class="py-3">$0.75</td> |
| <td class="py-3 pr-2 text-right">$11,430.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Flashing Installation</td> |
| <td class="py-3">320</td> |
| <td class="py-3">lf</td> |
| <td class="py-3">$6.00</td> |
| <td class="py-3 pr-2 text-right">$1,920.00</td> |
| </tr> |
| |
| |
| <tr class="border-b border-gray-800"> |
| <td colspan="5" class="pt-4 pb-2 pl-2 font-semibold text-primary-500">EQUIPMENT</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Scaffolding Rental</td> |
| <td class="py-3">1</td> |
| <td class="py-3">job</td> |
| <td class="py-3">$1,250.00</td> |
| <td class="py-3 pr-2 text-right">$1,250.00</td> |
| </tr> |
| <tr class="hover:bg-gray-700"> |
| <td class="py-3 pl-2">Dumpster</td> |
| <td class="py-3">3</td> |
| <td class="py-3">each</td> |
| <td class="py-3">$350.00</td> |
| <td class="py-3 pr-2 text-right">$1,050.00</td> |
| </tr> |
| |
| |
| <tr class="border-t border-gray-700 font-semibold"> |
| <td class="pt-4 pb-2 pl-2" colspan="4">Subtotal</td> |
| <td class="pt-4 pb-2 pr-2 text-right">$52,286.00</td> |
| </tr> |
| <tr> |
| <td class="pb-2 pl-2" colspan="4">Tax (6%)</td> |
| <td class="pb-2 pr-2 text-right">$3,137.16</td> |
| </tr> |
| <tr class="border-t border-gray-700 font-bold text-lg"> |
| <td class="pt-4 pb-2 pl-2" colspan="4">Total Estimate</td> |
| <td class="pt-4 pb-2 pr-2 text-right text-primary-500">$55,423.16</td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="lg:w-80 space-y-6"> |
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="user" class="mr-2 text-primary-500"></i> |
| Client Information |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-gray-400 text-sm">Client Name</p> |
| <p class="text-gray-100">Downtown Properties LLC</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Contact</p> |
| <p class="text-gray-100">John Smith</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Email</p> |
| <p class="text-gray-100">j.smith@downtownproperties.com</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Phone</p> |
| <p class="text-gray-100">(555) 123-4567</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Address</p> |
| <p class="text-gray-100">123 Main Street, Suite 400</p> |
| <p class="text-gray-100">Anytown, ST 12345</p> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="file-text" class="mr-2 text-primary-500"></i> |
| Blueprint Details |
| </h3> |
| <div class="space-y-3"> |
| <div> |
| <p class="text-gray-400 text-sm">Original File</p> |
| <p class="text-gray-100">downtown_office_roof.pdf</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Upload Date</p> |
| <p class="text-gray-100">May 14, 2023</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Scale Detected</p> |
| <p class="text-gray-100">1/8" = 1'-0"</p> |
| </div> |
| <div> |
| <p class="text-gray-400 text-sm">Extracted Data</p> |
| <div class="mt-1"> |
| <span class="inline-block bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs mr-1 mb-1">Square Footage</span> |
| <span class="inline-block bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs mr-1 mb-1">Materials</span> |
| <span class="inline-block bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs mr-1 mb-1">Dimensions</span> |
| <span class="inline-block bg-gray-700 text-gray-300 px-2 py-1 rounded text-xs mr-1 mb-1">Notes</span> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="bg-gray-800 rounded-xl p-6 border border-gray-700"> |
| <h3 class="text-xl font-semibold mb-4 flex items-center"> |
| <i data-feather="settings" class="mr-2 text-primary-500"></i> |
| Actions |
| </h3> |
| <div class="space-y-3"> |
| <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="send" class="w-4 h-4"></i> |
| <span>Send to Client</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="download" class="w-4 h-4"></i> |
| <span>Download PDF</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="printer" class="w-4 h-4"></i> |
| <span>Print Estimate</span> |
| </button> |
| <button class="w-full bg-gray-700 hover:bg-gray-600 text-white py-2 px-4 rounded-lg flex items-center justify-center space-x-2"> |
| <i data-feather="copy" class="w-4 h-4"></i> |
| <span>Duplicate Estimate</span> |
| </button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| feather.replace(); |
| |
| |
| const urlParams = new URLSearchParams(window.location.search); |
| const projectId = urlParams.get('project'); |
| |
| if (projectId) { |
| |
| const projects = JSON.parse(localStorage.getItem('projects') || '[]'); |
| const project = projects.find(p => p.id === projectId); |
| |
| if (project) { |
| |
| document.querySelector('h2').textContent = project.name; |
| document.querySelector('[class*="text-2xl font-bold"]').textContent = |
| `${project.area.toLocaleString()}`; |
| document.querySelectorAll('[class*="text-2xl font-bold"]')[1].textContent = |
| `${Math.round(project.cost * 0.7).toLocaleString()}`; |
| document.querySelectorAll('[class*="text-2xl font-bold"]')[2].textContent = |
| `${project.cost.toLocaleString()}`; |
| document.querySelector('[class*="text-lg text-primary-500"]').textContent = |
| `${project.cost.toLocaleString()}`; |
| |
| |
| const dateElement = document.querySelector('p:has(span.text-white)'); |
| if (dateElement) { |
| dateElement.innerHTML = `Estimate Date: <span class="text-white">${project.date}</span>`; |
| } |
| |
| const estimateElement = dateElement.nextElementSibling; |
| if (estimateElement) { |
| estimateElement.innerHTML = `Estimate #: <span class="text-white">RPW-${projectId.split('-')[1].slice(0,4)}</span>`; |
| } |
| } |
| } |
| }); |
| </script> |
| </body> |
| </html> |
