Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Build.Office - Ultimate Professional Ecosystem</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"> | |
| <style> | |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); | |
| :root { | |
| --midnight-sapphire: #0A122D; | |
| --arctic-glow: rgba(232, 244, 255, 0.92); | |
| --deep-ocean-start: #0055AA; | |
| --deep-ocean-end: #0077FF; | |
| --quantum-gold: #D4AF37; | |
| --platinum: #E8E8ED; | |
| } | |
| body { | |
| font-family: 'Inter', sans-serif; | |
| background-color: #F8FAFC; | |
| color: var(--midnight-sapphire); | |
| } | |
| .bg-sapphire { | |
| background-color: var(--midnight-sapphire); | |
| background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,0.005) 0%, rgba(255,255,255,0.005) 100%); | |
| } | |
| .bg-ocean-gradient { | |
| background: linear-gradient(135deg, var(--deep-ocean-start), var(--deep-ocean-end)); | |
| } | |
| .text-arctic { | |
| color: var(--arctic-glow); | |
| } | |
| .border-platinum { | |
| border-color: var(--platinum); | |
| } | |
| .hover-glow:hover { | |
| box-shadow: 0 0 15px rgba(0, 119, 255, 0.3); | |
| } | |
| .card-hover { | |
| transition: all 0.3s ease; | |
| } | |
| .card-hover:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); | |
| } | |
| .gold-particle { | |
| position: absolute; | |
| background-color: var(--quantum-gold); | |
| border-radius: 50%; | |
| pointer-events: none; | |
| opacity: 0; | |
| } | |
| .pulse-animation { | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { box-shadow: 0 0 0 0 rgba(0, 119, 255, 0.4); } | |
| 70% { box-shadow: 0 0 0 10px rgba(0, 119, 255, 0); } | |
| 100% { box-shadow: 0 0 0 0 rgba(0, 119, 255, 0); } | |
| } | |
| .ar-preview { | |
| position: absolute; | |
| width: 300px; | |
| height: 200px; | |
| background: rgba(255,255,255,0.9); | |
| border-radius: 8px; | |
| box-shadow: 0 10px 25px rgba(0,0,0,0.2); | |
| z-index: 100; | |
| display: none; | |
| overflow: hidden; | |
| } | |
| .holographic-contract { | |
| position: fixed; | |
| top: 50%; | |
| left: 50%; | |
| transform: translate(-50%, -50%); | |
| width: 600px; | |
| height: 400px; | |
| background: linear-gradient(135deg, rgba(0,85,170,0.9), rgba(0,119,255,0.9)); | |
| border-radius: 16px; | |
| box-shadow: 0 0 40px rgba(0,119,255,0.5); | |
| z-index: 1000; | |
| display: none; | |
| backdrop-filter: blur(10px); | |
| color: white; | |
| padding: 30px; | |
| overflow-y: auto; | |
| } | |
| .contract-line { | |
| position: relative; | |
| margin-bottom: 15px; | |
| padding-bottom: 15px; | |
| border-bottom: 1px solid rgba(255,255,255,0.2); | |
| } | |
| .signature-pad { | |
| margin-top: 20px; | |
| height: 80px; | |
| border: 1px dashed white; | |
| border-radius: 4px; | |
| cursor: crosshair; | |
| } | |
| .ai-assistant { | |
| position: fixed; | |
| bottom: 30px; | |
| right: 30px; | |
| width: 60px; | |
| height: 60px; | |
| background: var(--midnight-sapphire); | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| box-shadow: 0 5px 20px rgba(0,0,0,0.2); | |
| cursor: pointer; | |
| z-index: 500; | |
| transition: all 0.3s ease; | |
| } | |
| .ai-assistant:hover { | |
| transform: scale(1.1); | |
| } | |
| .ai-panel { | |
| position: fixed; | |
| bottom: 100px; | |
| right: 30px; | |
| width: 350px; | |
| height: 500px; | |
| background: white; | |
| border-radius: 16px; | |
| box-shadow: 0 10px 30px rgba(0,0,0,0.15); | |
| z-index: 500; | |
| display: none; | |
| overflow: hidden; | |
| flex-direction: column; | |
| } | |
| .ai-header { | |
| background: var(--midnight-sapphire); | |
| color: white; | |
| padding: 15px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .ai-messages { | |
| flex: 1; | |
| padding: 15px; | |
| overflow-y: auto; | |
| } | |
| .ai-input-area { | |
| padding: 15px; | |
| border-top: 1px solid #eee; | |
| } | |
| .ai-message { | |
| margin-bottom: 15px; | |
| max-width: 80%; | |
| } | |
| .ai-user { | |
| background: #f0f4ff; | |
| border-radius: 12px 12px 0 12px; | |
| padding: 10px; | |
| margin-left: auto; | |
| } | |
| .ai-bot { | |
| background: var(--midnight-sapphire); | |
| color: white; | |
| border-radius: 12px 12px 12px 0; | |
| padding: 10px; | |
| margin-right: auto; | |
| } | |
| .generator-card { | |
| transition: all 0.3s ease; | |
| border-left: 3px solid transparent; | |
| } | |
| .generator-card:hover { | |
| transform: translateX(5px); | |
| border-left: 3px solid var(--quantum-gold); | |
| } | |
| .theme-selector { | |
| width: 25px; | |
| height: 25px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| border: 2px solid transparent; | |
| } | |
| .theme-selector.active { | |
| border: 2px solid var(--quantum-gold); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen flex"> | |
| <!-- Left Panel - Global Office Navigator --> | |
| <div class="w-60 bg-sapphire text-arctic flex flex-col h-screen fixed"> | |
| <div class="p-4 border-b border-platinum border-opacity-20"> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center"> | |
| <i class="fas fa-building text-white"></i> | |
| </div> | |
| <h1 class="font-bold text-lg">Build.Office</h1> | |
| </div> | |
| <p class="text-xs opacity-70 mt-1">Your Global Construction HQ</p> | |
| </div> | |
| <div class="flex-1 overflow-y-auto p-4 space-y-6"> | |
| <!-- Office Builder Suite --> | |
| <div> | |
| <h3 class="text-xs uppercase tracking-wider opacity-70 mb-2">Office Builder</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-th-large text-sm w-5"></i> | |
| <span>Template Gallery</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-cubes text-sm w-5"></i> | |
| <span>Drag-n-drop Modules</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-map-marker-alt text-sm w-5"></i> | |
| <span>Coworking Spaces</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-envelope text-sm w-5"></i> | |
| <span>Virtual Addresses</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- HR & Talent Hub --> | |
| <div> | |
| <h3 class="text-xs uppercase tracking-wider opacity-70 mb-2">Talent Hub</h3> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-users text-sm w-5"></i> | |
| <span>AI Team Builder</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-hand-holding-usd text-sm w-5"></i> | |
| <span>Freelancer Marketplace</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-money-bill-wave text-sm w-5"></i> | |
| <span>Multi-Currency Payroll</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-blue-900 hover:bg-opacity-30 transition"> | |
| <i class="fas fa-balance-scale text-sm w-5"></i> | |
| <span>Compliance Checker</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Quick Actions --> | |
| <div> | |
| <h3 class="text-xs uppercase tracking-wider opacity-70 mb-2">Quick Actions</h3> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-3 rounded text-sm font-medium flex items-center justify-center space-x-2 mt-2"> | |
| <i class="fas fa-rocket"></i> | |
| <span>Launch Global Office</span> | |
| </button> | |
| <button class="w-full border border-blue-500 text-blue-400 hover:bg-blue-900 hover:bg-opacity-30 py-2 px-3 rounded text-sm font-medium flex items-center justify-center space-x-2 mt-2"> | |
| <i class="fas fa-lock"></i> | |
| <span>Secure First Order</span> | |
| </button> | |
| </div> | |
| <!-- Theme Customization --> | |
| <div> | |
| <h3 class="text-xs uppercase tracking-wider opacity-70 mb-2">Theme</h3> | |
| <div class="flex space-x-2"> | |
| <div class="theme-selector active bg-[#0A122D]" data-theme="sapphire"></div> | |
| <div class="theme-selector bg-[#1E3A8A]" data-theme="deep-blue"></div> | |
| <div class="theme-selector bg-[#065F46]" data-theme="emerald"></div> | |
| <div class="theme-selector bg-[#5B21B6]" data-theme="royal"></div> | |
| <div class="theme-selector bg-[#9A3412]" data-theme="rust"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 border-t border-platinum border-opacity-20"> | |
| <div class="flex items-center space-x-3"> | |
| <div class="w-8 h-8 rounded-full bg-blue-600 flex items-center justify-center"> | |
| <i class="fas fa-user text-white"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium">John Contractor</p> | |
| <p class="text-xs opacity-70">ENR Top 50 Firm</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 ml-60 mr-72"> | |
| <!-- Top Navigation --> | |
| <div class="bg-white border-b border-gray-200 p-4 flex justify-between items-center"> | |
| <div> | |
| <h2 class="text-xl font-bold">Professional Command Center</h2> | |
| <p class="text-sm text-gray-500">Build Globally, Operate Locally</p> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search projects, tools..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent w-64"> | |
| <i class="fas fa-search absolute left-3 top-2.5 text-gray-400"></i> | |
| </div> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-full text-sm font-medium flex items-center space-x-2"> | |
| <i class="fas fa-plus"></i> | |
| <span>New Project</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Dashboard --> | |
| <div class="p-6"> | |
| <!-- AI Generator Section --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">AI Generator Suite</h3> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All Tools</button> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Generator Card 1 --> | |
| <div class="border border-gray-200 rounded-lg p-4 generator-card"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-file-contract text-blue-600"></i> | |
| </div> | |
| <h4 class="font-medium">Contract Builder</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Generate professional contracts tailored to your project requirements and local laws.</p> | |
| <button class="w-full bg-blue-50 hover:bg-blue-100 text-blue-600 py-2 rounded text-sm font-medium">Generate Now</button> | |
| </div> | |
| <!-- Generator Card 2 --> | |
| <div class="border border-gray-200 rounded-lg p-4 generator-card"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-file-invoice-dollar text-green-600"></i> | |
| </div> | |
| <h4 class="font-medium">Proposal Generator</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Create winning project proposals with AI-powered content and pricing suggestions.</p> | |
| <button class="w-full bg-green-50 hover:bg-green-100 text-green-600 py-2 rounded text-sm font-medium">Generate Now</button> | |
| </div> | |
| <!-- Generator Card 3 --> | |
| <div class="border border-gray-200 rounded-lg p-4 generator-card"> | |
| <div class="flex items-center space-x-3 mb-3"> | |
| <div class="w-10 h-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-hard-hat text-purple-600"></i> | |
| </div> | |
| <h4 class="font-medium">Safety Report</h4> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Automatically generate OSHA-compliant safety reports from site photos.</p> | |
| <button class="w-full bg-purple-50 hover:bg-purple-100 text-purple-600 py-2 rounded text-sm font-medium">Generate Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Brand Studio Section --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Brand Studio</h3> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Customize</button> | |
| </div> | |
| <div class="grid grid-cols-3 gap-6"> | |
| <div class="col-span-2"> | |
| <div class="bg-gray-50 rounded-lg p-4 h-64 flex items-center justify-center"> | |
| <div class="text-center"> | |
| <i class="fas fa-upload text-4xl text-gray-300 mb-3"></i> | |
| <p class="text-gray-500 mb-2">Upload your logo</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white py-1.5 px-4 rounded-full text-sm">Select File</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Primary Color</label> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded border border-gray-300 bg-[#0A122D]"></div> | |
| <input type="text" value="#0A122D" class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Secondary Color</label> | |
| <div class="flex items-center space-x-2"> | |
| <div class="w-8 h-8 rounded border border-gray-300 bg-[#E8F4FF]"></div> | |
| <input type="text" value="#E8F4FF" class="flex-1 border border-gray-300 rounded px-2 py-1 text-sm"> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">AR Background</label> | |
| <select class="w-full border border-gray-300 rounded px-2 py-1.5 text-sm"> | |
| <option>Construction Site</option> | |
| <option>Architect Office</option> | |
| <option>Engineering Lab</option> | |
| <option>Project Hologram</option> | |
| </select> | |
| </div> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 rounded text-sm font-medium">Preview Brand</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Marketplace --> | |
| <div class="bg-white rounded-xl shadow-sm p-6 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Service Marketplace</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View All</button> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Post Service</button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <!-- Service Card 1 --> | |
| <div class="border border-gray-200 rounded-lg p-4 card-hover relative service-card"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-medium">Structural Engineering</h4> | |
| <p class="text-sm text-gray-500">By SteelDesign Pro</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">4.9 ★</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Professional structural analysis and design services for commercial buildings.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">$150/hr</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</button> | |
| </div> | |
| <div class="ar-preview"> | |
| <div class="h-full w-full bg-gray-100 flex items-center justify-center"> | |
| <p class="text-gray-500">AR Preview Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 2 --> | |
| <div class="border border-gray-200 rounded-lg p-4 card-hover relative service-card"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-medium">BIM Modeling</h4> | |
| <p class="text-sm text-gray-500">By DigitalConstruct</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">4.8 ★</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Complete BIM modeling services with LOD 400 deliverables.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">$2,500/project</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</button> | |
| </div> | |
| <div class="ar-preview"> | |
| <div class="h-full w-full bg-gray-100 flex items-center justify-center"> | |
| <p class="text-gray-500">AR Preview Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Service Card 3 --> | |
| <div class="border border-gray-200 rounded-lg p-4 card-hover relative service-card"> | |
| <div class="flex justify-between items-start mb-3"> | |
| <div> | |
| <h4 class="font-medium">Site Inspection</h4> | |
| <p class="text-sm text-gray-500">By SafeBuild Certifiers</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">5.0 ★</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-4">Comprehensive site inspections with OSHA compliance reports.</p> | |
| <div class="flex justify-between items-center"> | |
| <span class="font-semibold">$95/hr</span> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">View Details</button> | |
| </div> | |
| <div class="ar-preview"> | |
| <div class="h-full w-full bg-gray-100 flex items-center justify-center"> | |
| <p class="text-gray-500">AR Preview Loading...</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Bidding Board --> | |
| <div class="bg-white rounded-xl shadow-sm p-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-lg font-semibold">Project Bidding Board</h3> | |
| <div class="flex space-x-2"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Public Tenders</button> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium">Private Invites</button> | |
| </div> | |
| </div> | |
| <div class="overflow-x-auto"> | |
| <table class="min-w-full divide-y divide-gray-200"> | |
| <thead class="bg-gray-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Project</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Client</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Location</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Budget</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Deadline</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Actions</th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Mixed-Use Tower</div> | |
| <div class="text-sm text-gray-500">Commercial/Residential</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-building text-blue-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">UrbanVest</div> | |
| <div class="text-sm text-gray-500">RE Developer</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Miami, FL</div> | |
| <div class="text-sm text-gray-500">USA</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="font-medium">$42M</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">Jul 15, 2023</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-green-600 hover:text-green-900 bid-button" data-project="Mixed-Use Tower">Bid</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Hospital Renovation</div> | |
| <div class="text-sm text-gray-500">Healthcare Facility</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-hospital text-green-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">HealthPlus</div> | |
| <div class="text-sm text-gray-500">Hospital Network</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">Toronto, ON</div> | |
| <div class="text-sm text-gray-500">Canada</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="font-medium">$28M</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800">Aug 1, 2023</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-green-600 hover:text-green-900 bid-button" data-project="Hospital Renovation">Bid</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="font-medium">Data Center</div> | |
| <div class="text-sm text-gray-500">Tech Infrastructure</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="flex items-center"> | |
| <div class="flex-shrink-0 h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-server text-purple-600"></i> | |
| </div> | |
| <div class="ml-4"> | |
| <div class="text-sm font-medium text-gray-900">CloudNova</div> | |
| <div class="text-sm text-gray-500">Tech Company</div> | |
| </div> | |
| </div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <div class="text-sm text-gray-900">London, UK</div> | |
| <div class="text-sm text-gray-500">United Kingdom</div> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="font-medium">£65M</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap"> | |
| <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">Jun 30, 2023</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">View</button> | |
| <button class="text-green-600 hover:text-green-900 bid-button" data-project="Data Center">Bid</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Right Panel - Enterprise Nexus --> | |
| <div class="w-72 bg-white border-l border-gray-200 fixed right-0 h-screen overflow-y-auto"> | |
| <div class="p-4 border-b border-gray-200"> | |
| <h3 class="font-semibold">Enterprise Nexus</h3> | |
| <p class="text-sm text-gray-500">AI-Powered Professional Tools</p> | |
| </div> | |
| <div class="p-4"> | |
| <!-- AI Tools Section --> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">AI Generators</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center"> | |
| <i class="fas fa-file-contract text-blue-600"></i> | |
| </div> | |
| <span>Contract Builder</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center"> | |
| <i class="fas fa-hard-hat text-green-600"></i> | |
| </div> | |
| <span>Safety Audit Assistant</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 flex items-center justify-center"> | |
| <i class="fas fa-file-alt text-purple-600"></i> | |
| </div> | |
| <span>Proposal Generator</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Marketing Suite --> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Marketing Suite</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 flex items-center justify-center"> | |
| <i class="fab fa-linkedin-in text-yellow-600"></i> | |
| </div> | |
| <span>Social Media Auto-Poster</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 flex items-center justify-center"> | |
| <i class="fas fa-palette text-red-600"></i> | |
| </div> | |
| <span>Design Studio</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Ecosystem Integrations --> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Integrations</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-indigo-100 flex items-center justify-center"> | |
| <i class="fas fa-cube text-indigo-600"></i> | |
| </div> | |
| <span>Software Hub</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-teal-100 flex items-center justify-center"> | |
| <i class="fas fa-truck text-teal-600"></i> | |
| </div> | |
| <span>Global Logistics</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Security & Compliance --> | |
| <div class="mb-6"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-3">Security</h4> | |
| <div class="space-y-2"> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-fingerprint text-gray-600"></i> | |
| </div> | |
| <span>Biometric Access</span> | |
| </button> | |
| <button class="w-full text-left flex items-center space-x-2 p-2 rounded hover:bg-gray-50 transition"> | |
| <div class="w-8 h-8 rounded-full bg-gray-100 flex items-center justify-center"> | |
| <i class="fas fa-shield-alt text-gray-600"></i> | |
| </div> | |
| <span>Compliance Center</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Global Stats --> | |
| <div class="bg-blue-50 rounded-lg p-4"> | |
| <h4 class="text-sm font-medium text-blue-800 mb-2">Global Stats</h4> | |
| <div class="space-y-3"> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-blue-700">Coworking Spaces</span> | |
| <span class="font-medium">4,200+</span> | |
| </div> | |
| <div class="w-full bg-blue-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 90%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-blue-700">Compliance Rate</span> | |
| <span class="font-medium">98%</span> | |
| </div> | |
| <div class="w-full bg-blue-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 98%"></div> | |
| </div> | |
| </div> | |
| <div> | |
| <div class="flex justify-between text-xs mb-1"> | |
| <span class="text-blue-700">Languages</span> | |
| <span class="font-medium">60</span> | |
| </div> | |
| <div class="w-full bg-blue-200 rounded-full h-1.5"> | |
| <div class="bg-blue-600 h-1.5 rounded-full" style="width: 80%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Testimonial --> | |
| <div class="mt-6 bg-gray-50 rounded-lg p-4"> | |
| <div class="flex items-center space-x-2 text-yellow-500 mb-2"> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| <i class="fas fa-star"></i> | |
| </div> | |
| <p class="text-sm italic text-gray-600 mb-2">"This isn't just a platform—it's our global headquarters."</p> | |
| <p class="text-xs font-medium text-gray-700">— ENR Top 50 Contractor</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- AI Assistant Button --> | |
| <div class="ai-assistant" id="ai-assistant-button"> | |
| <i class="fas fa-robot text-white text-xl"></i> | |
| </div> | |
| <!-- AI Assistant Panel --> | |
| <div class="ai-panel" id="ai-panel"> | |
| <div class="ai-header"> | |
| <div class="flex items-center space-x-2"> | |
| <i class="fas fa-robot text-white"></i> | |
| <h3>Build.Office AI</h3> | |
| </div> | |
| <button class="text-white hover:text-gray-300 close-ai"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="ai-messages" id="ai-messages"> | |
| <div class="ai-message ai-bot"> | |
| <p>Hello! I'm your Build.Office AI assistant. How can I help you with your construction projects today?</p> | |
| </div> | |
| </div> | |
| <div class="ai-input-area"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Ask me anything..." class="w-full pl-4 pr-10 py-2 border border-gray-300 rounded-full text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" id="ai-input"> | |
| <button class="absolute right-2 top-2 text-gray-400 hover:text-blue-600" id="ai-send"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="flex space-x-2 mt-2"> | |
| <button class="text-xs bg-blue-50 text-blue-600 px-2 py-1 rounded-full hover:bg-blue-100 quick-prompt" data-prompt="How do I create a contract?">Contracts</button> | |
| <button class="text-xs bg-green-50 text-green-600 px-2 py-1 rounded-full hover:bg-green-100 quick-prompt" data-prompt="Help me find subcontractors">Subcontractors</button> | |
| <button class="text-xs bg-purple-50 text-purple-600 px-2 py-1 rounded-full hover:bg-purple-100 quick-prompt" data-prompt="Explain compliance requirements">Compliance</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Holographic Contract Modal --> | |
| <div class="holographic-contract"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h3 class="text-xl font-bold">Project Contract Agreement</h3> | |
| <button class="close-contract text-white hover:text-gray-300"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| <div class="contract-line"> | |
| <h4 class="font-semibold mb-2">Project: <span id="contract-project-name">Mixed-Use Tower</span></h4> | |
| <p class="text-sm">Client: UrbanVest Development LLC</p> | |
| </div> | |
| <div class="contract-line"> | |
| <h4 class="font-semibold mb-2">Scope of Work</h4> | |
| <p class="text-sm">Complete structural engineering services for 42-story mixed-use tower including foundation design, lateral system analysis, and construction administration.</p> | |
| </div> | |
| <div class="contract-line"> | |
| <h4 class="font-semibold mb-2">Terms</h4> | |
| <ul class="text-sm list-disc pl-5 space-y-1"> | |
| <li>Total Fee: $285,000 (paid in 4 milestones)</li> | |
| <li>Duration: 9 months from signing</li> | |
| <li>Liability: $2,000,000 professional liability coverage</li> | |
| <li>Governing Law: State of Florida</li> | |
| </ul> | |
| </div> | |
| <div class="contract-line"> | |
| <h4 class="font-semibold mb-2">Signatures</h4> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div> | |
| <p class="text-sm mb-1">Client Representative</p> | |
| <div class="signature-pad" id="client-signature"></div> | |
| </div> | |
| <div> | |
| <p class="text-sm mb-1">Your Signature</p> | |
| <div class="signature-pad" id="your-signature"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 flex justify-end space-x-3"> | |
| <button class="px-4 py-2 border border-white rounded text-sm hover:bg-white hover:text-blue-600 transition close-contract">Cancel</button> | |
| <button class="px-4 py-2 bg-white text-blue-600 rounded text-sm font-medium hover:bg-gray-100 transition" id="accept-contract">Accept & Sign</button> | |
| </div> | |
| </div> | |
| <script> | |
| // Service Card AR Preview Hover Effect | |
| document.querySelectorAll('.service-card').forEach(card => { | |
| const preview = card.querySelector('.ar-preview'); | |
| card.addEventListener('mouseenter', (e) => { | |
| const rect = card.getBoundingClientRect(); | |
| preview.style.display = 'block'; | |
| preview.style.left = `${rect.left - 320}px`; | |
| preview.style.top = `${rect.top}px`; | |
| }); | |
| card.addEventListener('mouseleave', () => { | |
| preview.style.display = 'none'; | |
| }); | |
| }); | |
| // Bid Button Click - Show Holographic Contract | |
| document.querySelectorAll('.bid-button').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const projectName = e.target.getAttribute('data-project'); | |
| document.getElementById('contract-project-name').textContent = projectName; | |
| document.querySelector('.holographic-contract').style.display = 'block'; | |
| }); | |
| }); | |
| // Close Contract Modal | |
| document.querySelectorAll('.close-contract').forEach(button => { | |
| button.addEventListener('click', () => { | |
| document.querySelector('.holographic-contract').style.display = 'none'; | |
| }); | |
| }); | |
| // Accept Contract - Golden Particle Effect | |
| document.getElementById('accept-contract').addEventListener('click', () => { | |
| // Create golden particles | |
| for (let i = 0; i < 50; i++) { | |
| createParticle(); | |
| } | |
| // Close modal after animation | |
| setTimeout(() => { | |
| document.querySelector('.holographic-contract').style.display = 'none'; | |
| alert('Contract accepted successfully! Project dashboard will now be created.'); | |
| }, 1000); | |
| }); | |
| function createParticle() { | |
| const particle = document.createElement('div'); | |
| particle.className = 'gold-particle'; | |
| // Random size between 2px and 5px | |
| const size = Math.random() * 3 + 2; | |
| particle.style.width = `${size}px`; | |
| particle.style.height = `${size}px`; | |
| // Random position in viewport | |
| particle.style.left = `${Math.random() * window.innerWidth}px`; | |
| particle.style.top = `${Math.random() * window.innerHeight}px`; | |
| document.body.appendChild(particle); | |
| // Animate particle | |
| const animationDuration = Math.random() * 2000 + 1000; | |
| particle.animate([ | |
| { transform: 'translateY(0)', opacity: 1 }, | |
| { transform: `translateY(${Math.random() * 100 - 50}px)`, opacity: 0 } | |
| ], { | |
| duration: animationDuration, | |
| easing: 'cubic-bezier(0.4, 0, 0.2, 1)' | |
| }); | |
| // Remove particle after animation | |
| setTimeout(() => { | |
| particle.remove(); | |
| }, animationDuration); | |
| } | |
| // Simple Signature Pad Implementation | |
| const clientSignature = document.getElementById('client-signature'); | |
| const yourSignature = document.getElementById('your-signature'); | |
| let isDrawing = false; | |
| function startDrawing(e) { | |
| isDrawing = true; | |
| draw(e); | |
| } | |
| function stopDrawing() { | |
| isDrawing = false; | |
| } | |
| function draw(e) { | |
| if (!isDrawing) return; | |
| const rect = e.target.getBoundingClientRect(); | |
| const x = e.clientX - rect.left; | |
| const y = e.clientY - rect.top; | |
| const dot = document.createElement('div'); | |
| dot.style.position = 'absolute'; | |
| dot.style.left = `${x}px`; | |
| dot.style.top = `${y}px`; | |
| dot.style.width = '3px'; | |
| dot.style.height = '3px'; | |
| dot.style.backgroundColor = 'white'; | |
| dot.style.borderRadius = '50%'; | |
| e.target.appendChild(dot); | |
| } | |
| yourSignature.addEventListener('mousedown', startDrawing); | |
| yourSignature.addEventListener('mousemove', draw); | |
| yourSignature.addEventListener('mouseup', stopDrawing); | |
| yourSignature.addEventListener('mouseout', stopDrawing); | |
| // Simulate client signature (pre-filled) | |
| for (let i = 0; i < 100; i++) { | |
| const x = Math.random() * clientSignature.offsetWidth; | |
| const y = Math.random() * 30 + 30; | |
| const dot = document.createElement('div'); | |
| dot.style.position = 'absolute'; | |
| dot.style.left = `${x}px`; | |
| dot.style.top = `${y}px`; | |
| dot.style.width = '3px'; | |
| dot.style.height = '3px'; | |
| dot.style.backgroundColor = 'white'; | |
| dot.style.borderRadius = '50%'; | |
| clientSignature.appendChild(dot); | |
| } | |
| // AI Assistant Toggle | |
| const aiButton = document.getElementById('ai-assistant-button'); | |
| const aiPanel = document.getElementById('ai-panel'); | |
| aiButton.addEventListener('click', () => { | |
| if (aiPanel.style.display === 'flex') { | |
| aiPanel.style.display = 'none'; | |
| } else { | |
| aiPanel.style.display = 'flex'; | |
| } | |
| }); | |
| document.querySelector('.close-ai').addEventListener('click', () => { | |
| aiPanel.style.display = 'none'; | |
| }); | |
| // AI Chat Functionality | |
| const aiMessages = document.getElementById('ai-messages'); | |
| const aiInput = document.getElementById('ai-input'); | |
| const aiSend = document.getElementById('ai-send'); | |
| function addMessage(text, isUser) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `ai-message ${isUser ? 'ai-user' : 'ai-bot'}`; | |
| messageDiv.innerHTML = `<p>${text}</p>`; | |
| aiMessages.appendChild(messageDiv); | |
| aiMessages.scrollTop = aiMessages.scrollHeight; | |
| } | |
| function sendMessage() { | |
| const text = aiInput.value.trim(); | |
| if (text === '') return; | |
| addMessage(text, true); | |
| aiInput.value = ''; | |
| // Simulate AI response | |
| setTimeout(() => { | |
| const responses = [ | |
| "I can help with that. First, please check the contract builder tool in the AI Generators section.", | |
| "For subcontractors, I recommend searching our Talent Hub or posting in the Freelancer Marketplace.", | |
| "Compliance requirements vary by location. I can generate a customized report if you specify the project location.", | |
| "You can find BIM modeling services in our Service Marketplace starting at $95/hour.", | |
| "For virtual office locations, check the Office Builder section in the left panel." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| addMessage(randomResponse, false); | |
| }, 1000); | |
| } | |
| aiSend.addEventListener('click', sendMessage); | |
| aiInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') sendMessage(); | |
| }); | |
| // Quick prompt buttons | |
| document.querySelectorAll('.quick-prompt').forEach(button => { | |
| button.addEventListener('click', (e) => { | |
| const prompt = e.target.getAttribute('data-prompt'); | |
| aiInput.value = prompt; | |
| sendMessage(); | |
| }); | |
| }); | |
| // Theme Selector | |
| document.querySelectorAll('.theme-selector').forEach(selector => { | |
| selector.addEventListener('click', (e) => { | |
| // Remove active class from all selectors | |
| document.querySelectorAll('.theme-selector').forEach(s => { | |
| s.classList.remove('active'); | |
| }); | |
| // Add active class to clicked selector | |
| e.target.classList.add('active'); | |
| // Change theme (simplified example) | |
| const theme = e.target.getAttribute('data-theme'); | |
| let primaryColor = '#0A122D'; // default sapphire | |
| switch(theme) { | |
| case 'deep-blue': | |
| primaryColor = '#1E3A8A'; | |
| break; | |
| case 'emerald': | |
| primaryColor = '#065F46'; | |
| break; | |
| case 'royal': | |
| primaryColor = '#5B21B6'; | |
| break; | |
| case 'rust': | |
| primaryColor = '#9A3412'; | |
| break; | |
| } | |
| // Update left panel color | |
| document.querySelector('.w-60').style.backgroundColor = primaryColor; | |
| // Update other theme elements as needed | |
| document.querySelectorAll('.bg-blue-600').forEach(el => { | |
| el.style.backgroundColor = primaryColor; | |
| }); | |
| }); | |
| }); | |
| </script> | |
| <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=Unnab/build-office-workspace" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |