Hugging Face's logo

Spaces:
Unnab
/
build-office-workspace
Running

App Files Community
build-office-workspace / index.html
Unnab's picture
Unnab
Add 3 files
d9a99c9 verified
raw
history blame contribute delete
55.3 kB
 <!DOCTYPE html>
<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>