water-mitigation / index.html
ToasterBaptism's picture
The app tabs and sections along with the edit and pretty much everything doesn't when clicking on anything - Follow Up Deployment
1352995 verified
Raw History Blame Contribute Delete
64 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AquaClaim Pro | Water Mitigation Claims Management</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>
/* Custom CSS for elements that need more precise control */
.sidebar {
transition: all 0.3s ease;
}
.task-card:hover {
transform: translateY(-2px);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}
.photo-thumbnail {
transition: all 0.2s ease;
}
.photo-thumbnail:hover {
transform: scale(1.05);
}
.dropdown-content {
display: none;
position: absolute;
min-width: 160px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
#map {
height: 300px;
width: 100%;
}
</style>
</head>
<body class="bg-gray-50 font-sans">
<div class="flex h-screen overflow-hidden">
<!-- Sidebar -->
<div class="sidebar bg-blue-800 text-white w-64 flex-shrink-0">
<div class="p-4 flex items-center justify-between border-b border-blue-700">
<div class="flex items-center space-x-2">
<i class="fas fa-water text-2xl text-blue-300"></i>
<span class="text-xl font-bold">AquaClaim Pro</span>
</div>
<button class="md:hidden text-white focus:outline-none" onclick="toggleSidebar()">
<i class="fas fa-times"></i>
</button>
</div>
<div class="p-4 border-b border-blue-700">
<div class="flex items-center space-x-3">
<div class="h-10 w-10 rounded-full bg-blue-600 flex items-center justify-center">
<span class="font-semibold">AD</span>
</div>
<div>
<p class="font-medium">Admin User</p>
<p class="text-xs text-blue-300">Administrator</p>
</div>
</div>
</div>
<nav class="p-4 space-y-2">
<a href="#" class="flex items-center space-x-3 p-2 rounded bg-blue-700">
<i class="fas fa-tachometer-alt w-5"></i>
<span>Dashboard</span>
</a>
<div class="dropdown relative">
<button class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 w-full text-left">
<i class="fas fa-project-diagram w-5"></i>
<span>Projects</span>
<i class="fas fa-chevron-down ml-auto text-xs"></i>
</button>
<div class="dropdown-content bg-blue-800 rounded shadow-lg mt-1 ml-2">
<a href="#" class="block px-4 py-2 hover:bg-blue-700">All Projects</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-700">New Project</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-700">Project Map</a>
</div>
</div>
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-tasks w-5"></i>
<span>Tasks</span>
</a>
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-users w-5"></i>
<span>Teams</span>
</a>
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-toolbox w-5"></i>
<span>Equipment</span>
</a>
<div class="dropdown relative">
<button class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700 w-full text-left">
<i class="fas fa-file-alt w-5"></i>
<span>Documents</span>
<i class="fas fa-chevron-down ml-auto text-xs"></i>
</button>
<div class="dropdown-content bg-blue-800 rounded shadow-lg mt-1 ml-2">
<a href="#" class="block px-4 py-2 hover:bg-blue-700">Moisture Logs</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-700">Photos</a>
<a href="#" class="block px-4 py-2 hover:bg-blue-700">Reports</a>
</div>
</div>
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-book w-5"></i>
<span>References</span>
</a>
<div class="pt-4 border-t border-blue-700">
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-cog w-5"></i>
<span>Settings</span>
</a>
<a href="#" class="flex items-center space-x-3 p-2 rounded hover:bg-blue-700">
<i class="fas fa-sign-out-alt w-5"></i>
<span>Logout</span>
</a>
</div>
</nav>
</div>
<!-- Main Content -->
<div class="flex-1 overflow-auto">
<!-- Top Navigation -->
<header class="bg-white shadow-sm p-4 flex items-center justify-between">
<div class="flex items-center space-x-4">
<button class="text-gray-600 focus:outline-none md:hidden" onclick="toggleSidebar()">
<i class="fas fa-bars"></i>
</button>
<h1 class="text-xl font-semibold text-gray-800">Project Dashboard</h1>
</div>
<div class="flex items-center space-x-4">
<div class="relative">
<input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-full focus:outline-none focus:ring-2 focus:ring-blue-500">
<i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
</div>
<button class="text-gray-600 hover:text-gray-800">
<i class="fas fa-bell"></i>
</button>
<button class="text-gray-600 hover:text-gray-800">
<i class="fas fa-question-circle"></i>
</button>
</div>
</header>
<!-- Dashboard Content -->
<main class="p-4">
<!-- Project Overview -->
<div class="bg-white rounded-lg shadow mb-6 overflow-hidden">
<div class="p-4 border-b flex items-center justify-between">
<h2 class="text-lg font-semibold">Water Damage Restoration - 123 Main St</h2>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
<i class="fas fa-edit mr-1"></i> Edit
</button>
<button class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 flex items-center">
<i class="fas fa-file-pdf mr-1"></i> Export
</button>
</div>
</div>
<div class="p-4">
<!-- Project Tabs -->
<div class="border-b border-gray-200">
<nav class="flex -mb-px space-x-8">
<button onclick="openTab(event, 'overview')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-blue-500 text-blue-600">Overview</button>
<button onclick="openTab(event, 'tasks')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Tasks</button>
<button onclick="openTab(event, 'equipment')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Equipment</button>
<button onclick="openTab(event, 'documents')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Documents</button>
<button onclick="openTab(event, 'team')" class="tab-button py-4 px-1 border-b-2 font-medium text-sm border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300">Team</button>
</nav>
</div>
<!-- Tab Contents -->
<div id="overview" class="tab-content active">
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mt-4">
<!-- Project Details -->
<div class="col-span-2 space-y-4">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Client Information</h3>
<p class="text-sm"><span class="font-medium">Name:</span> John & Sarah Smith</p>
<p class="text-sm"><span class="font-medium">Phone:</span> (555) 123-4567</p>
<p class="text-sm"><span class="font-medium">Email:</span> j.smith@example.com</p>
<p class="text-sm"><span class="font-medium">Property Type:</span> Single Family Home</p>
</div>
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Insurance Information</h3>
<p class="text-sm"><span class="font-medium">Claim #:</span> CL-2023-56789</p>
<p class="text-sm"><span class="font-medium">Carrier:</span> Statewide Insurance</p>
<p class="text-sm"><span class="font-medium">Adjuster:</span> Michael Johnson</p>
<p class="text-sm"><span class="font-medium">Policy #:</span> POL-9876543</p>
</div>
</div>
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Claim Details</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div>
<p class="text-xs text-gray-500">Date of Loss</p>
<p class="text-sm">06/15/2023</p>
</div>
<div>
<p class="text-xs text-gray-500">Inspection Date</p>
<p class="text-sm">06/16/2023</p>
</div>
<div>
<p class="text-xs text-gray-500">Start Date</p>
<p class="text-sm">06/17/2023</p>
</div>
<div>
<p class="text-xs text-gray-500">Status</p>
<p class="text-sm"><span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">In Progress</span></p>
</div>
</div>
<div class="mt-4">
<p class="text-xs text-gray-500">Type of Damage</p>
<div class="flex flex-wrap gap-2 mt-1">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Water Damage</span>
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Category 2</span>
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Structural</span>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Location</h3>
gj <p class="text-sm mb-2">123 Main Street, Anytown, CA 90210</p>
<div id="map" class="rounded border border-gray-300"></div>
</div>
</div>
<!-- Quick Stats -->
<div class="space-y-4">
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Project Summary</h3>
<div class="space-y-3">
<div>
<p class="text-xs text-gray-500">Total Tasks</p>
<p class="text-lg font-medium">24</p>
</div>
<div>
<p class="text-xs text-gray-500">Completed</p>
<div class="flex items-center space-x-2">
<div class="w-full bg-gray-200 rounded-full h-2">
<div class="bg-green-500 h-2 rounded-full" style="width: 45%"></div>
</div>
<span class="text-sm">11/24</span>
</div>
</div>
<div>
<p class="text-xs text-gray-500">Team Members</p>
<p class="text-lg font-medium">5</p>
</div>
<div>
<p class="text-xs text-gray-500">Equipment Deployed</p>
<p class="text-lg font-medium">8</p>
</div>
</div>
</div>
<div class="bg-gray-50 p-4 rounded border">
<h3 class="font-medium text-gray-700 mb-2">Recent Activity</h3>
<div class="space-y-3">
<div class="flex items-start">
<div class="h-8 w-8 rounded-full bg-blue-100 flex items-center justify-center mr-2">
<i class="fas fa-user text-blue-600 text-xs"></i>
</div>
<div>
<p class="text-sm">Mark completed "Remove baseboards in living room"</p>
<p class="text-xs text-gray-500">Today, 10:15 AM</p>
</div>
</div>
<div class="flex items-start">
<div class="h-8 w-8 rounded-full bg-green-100 flex items-center justify-center mr-2">
<i class="fas fa-toolbox text-green-600 text-xs"></i>
</div>
<div>
<p class="text-sm">Added 2 LGR Dehumidifiers to equipment log</p>
<p class="text-xs text-gray-500">Today, 9:30 AM</p>
</div>
</div>
<div class="flex items-start">
<div class="h-8 w-8 rounded-full bg-purple-100 flex items-center justify-center mr-2">
<i class="fas fa-camera text-purple-600 text-xs"></i>
</div>
<div>
<p class="text-sm">Uploaded 5 photos of kitchen damage</p>
<p class="text-xs text-gray-500">Yesterday, 4:45 PM</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="tasks" class="tab-content">
<div class="mt-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-700">Project Tasks</h3>
<button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
<i class="fas fa-plus mr-1"></i> Add Task
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<!-- To Do Column -->
<div class="bg-gray-50 p-3 rounded border">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium text-gray-700">To Do</h4>
<span class="bg-gray-200 text-gray-700 text-xs px-2 py-1 rounded-full">8</span>
</div>
<div class="space-y-3">
<!-- Task Card -->
<div class="task-card bg-white p-3 rounded border hover:border-blue-300 cursor-pointer">
<div class="flex justify-between items-start">
<div>
<p class="font-medium text-sm">Remove carpet in master bedroom</p>
<p class="text-xs text-gray-500 mt-1">Assigned to: Tech Team A</p>
</div>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-blue-500">
<i class="fas fa-edit text-xs"></i>
</button>
<button class="text-gray-400 hover:text-red-500">
<i class="fas fa-trash text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs mr-2">Water</span>
<span class="px-2 py-1 bg-gray-100 text-gray-800 rounded-full text-xs">Priority</span>
</div>
</div>
<!-- Task Card -->
<div class="task-card bg-white p-3 rounded border hover:border-blue-300 cursor-pointer">
<div class="flex justify-between items-start">
<div>
<p class="font-medium text-sm">Take moisture readings in bathroom</p>
<p class="text-xs text-gray-500 mt-1">Assigned to: Jane Doe</p>
</div>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-blue-500">
<i class="fas fa-edit text-xs"></i>
</button>
<button class="text-gray-400 hover:text-red-500">
<i class="fas fa-trash text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs mr-2">Monitoring</span>
</div>
</div>
</div>
</div>
<!-- In Progress Column -->
<div class="bg-gray-50 p-3 rounded border">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium text-gray-700">In Progress</h4>
<span class="bg-yellow-100 text-yellow-800 text-xs px-2 py-1 rounded-full">5</span>
</div>
<div class="space-y-3">
<!-- Task Card -->
<div class="task-card bg-white p-3 rounded border hover:border-blue-300 cursor-pointer">
<div class="flex justify-between items-start">
<div>
<p class="font-medium text-sm">Set up air movers in living room</p>
<p class="text-xs text-gray-500 mt-1">Assigned to: John Smith</p>
</div>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-blue-500">
<i class="fas fa-edit text-xs"></i>
</button>
<button class="text-gray-400 hover:text-red-500">
<i class="fas fa-trash text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs mr-2">Drying</span>
<span class="px-2 py-1 bg-red-100 text-red-800 rounded-full text-xs">Urgent</span>
</div>
<div class="mt-2 flex items-center text-xs text-gray-500">
<i class="fas fa-clock mr-1"></i>
<span>Started: Today, 9:15 AM</span>
</div>
</div>
</div>
</div>
<!-- Completed Column -->
<div class="bg-gray-50 p-3 rounded border">
<div class="flex items-center justify-between mb-3">
<h4 class="font-medium text-gray-700">Completed</h4>
<span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">11</span>
</div>
<div class="space-y-3">
<!-- Task Card -->
<div class="task-card bg-white p-3 rounded border hover:border-blue-300 cursor-pointer">
<div class="flex justify-between items-start">
<div>
<p class="font-medium text-sm">Initial inspection and assessment</p>
<p class="text-xs text-gray-500 mt-1">Assigned to: Mike Johnson</p>
</div>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-blue-500">
<i class="fas fa-edit text-xs"></i>
</button>
<button class="text-gray-400 hover:text-red-500">
<i class="fas fa-trash text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs mr-2">Inspection</span>
</div>
<div class="mt-2 flex items-center text-xs text-gray-500">
<i class="fas fa-check-circle mr-1 text-green-500"></i>
<span>Completed: 06/16/2023</span>
</div>
</div>
<!-- Task Card -->
<div class="task-card bg-white p-3 rounded border hover:border-blue-300 cursor-pointer">
<div class="flex justify-between items-start">
<div>
<p class="font-medium text-sm">Remove baseboards in living room</p>
<p class="text-xs text-gray-500 mt-1">Assigned to: Tech Team A</p>
</div>
<div class="flex space-x-1">
<button class="text-gray-400 hover:text-blue-500">
<i class="fas fa-edit text-xs"></i>
</button>
<button class="text-gray-400 hover:text-red-500">
<i class="fas fa-trash text-xs"></i>
</button>
</div>
</div>
<div class="flex items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs mr-2">Demolition</span>
</div>
<div class="mt-2 flex items-center text-xs text-gray-500">
<i class="fas fa-check-circle mr-1 text-green-500"></i>
<span>Completed: Today, 10:15 AM</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="equipment" class="tab-content">
<div class="mt-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-700">Equipment Log</h3>
<button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
<i class="fas fa-plus mr-1"></i> Add Equipment
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded border">
<thead>
<tr class="bg-gray-50 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th class="px-4 py-3">Type</th>
<th class="px-4 py-3">Model</th>
<th class="px-4 py-3">Serial #</th>
<th class="px-4 py-3">Location</th>
<th class="px-4 py-3">Status</th>
<th class="px-4 py-3">Actions</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-4 py-3 text-sm">LGR Dehumidifier</td>
<td class="px-4 py-3 text-sm">Dri-Eaz LGR 7000XLi</td>
<td class="px-4 py-3 text-sm">LGR-789456</td>
<td class="px-4 py-3 text-sm">Living Room</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-3 text-sm">
<button class="text-blue-500 hover:text-blue-700 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td class="px-4 py-3 text-sm">Axial Air Mover</td>
<td class="px-4 py-3 text-sm">Dri-Eaz F284</td>
<td class="px-4 py-3 text-sm">AM-123987</td>
<td class="px-4 py-3 text-sm">Master Bedroom</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Active</span>
</td>
<td class="px-4 py-3 text-sm">
<button class="text-blue-500 hover:text-blue-700 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
<tr>
<td class="px-4 py-3 text-sm">HEPA Air Scrubber</td>
<td class="px-4 py-3 text-sm">Dri-Eaz HEPA 500</td>
<td class="px-4 py-3 text-sm">HS-456321</td>
<td class="px-4 py-3 text-sm">Kitchen</td>
<td class="px-4 py-3">
<span class="px-2 py-1 bg-yellow-100 text-yellow-800 rounded-full text-xs">Needs Filter</span>
</td>
<td class="px-4 py-3 text-sm">
<button class="text-blue-500 hover:text-blue-700 mr-2">
<i class="fas fa-edit"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="mt-6">
<h3 class="font-medium text-gray-700 mb-3">Moisture Readings</h3>
<div class="bg-gray-50 p-4 rounded border">
<div class="flex justify-between items-center mb-3">
<h4 class="text-sm font-medium">Living Room - North Wall</h4>
<button class="px-2 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 text-xs flex items-center">
<i class="fas fa-plus mr-1"></i> Add Reading
</button>
</div>
<div class="overflow-x-auto">
<table class="min-w-full bg-white rounded border text-sm">
<thead>
<tr class="bg-gray-100 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
<th class="px-3 py-2">Date</th>
<th class="px-3 py-2">Time</th>
<th class="px-3 py-2">%MC</th>
<th class="px-3 py-2">GPP</th>
<th class="px-3 py-2">RH%</th>
<th class="px-3 py-2">Temp (°F)</th>
<th class="px-3 py-2">Tech</th>
</tr>
</thead>
<tbody class="divide-y divide-gray-200">
<tr>
<td class="px-3 py-2">06/17/2023</td>
<td class="px-3 py-2">9:00 AM</td>
<td class="px-3 py-2">32%</td>
<td class="px-3 py-2">18.5</td>
<td class="px-3 py-2">65%</td>
<td class="px-3 py-2">72</td>
<td class="px-3 py-2">J. Smith</td>
</tr>
<tr>
<td class="px-3 py-2">06/17/2023</td>
<td class="px-3 py-2">3:00 PM</td>
<td class="px-3 py-2">28%</td>
<td class="px-3 py-2">16.2</td>
<td class="px-3 py-2">60%</td>
<td class="px-3 py-2">74</td>
<td class="px-3 py-2">M. Johnson</td>
</tr>
<tr>
<td class="px-3 py-2">06/18/2023</td>
<td class="px-3 py-2">9:00 AM</td>
<td class="px-3 py-2">22%</td>
<td class="px-3 py-2">14.0</td>
<td class="px-3 py-2">55%</td>
<td class="px-3 py-2">73</td>
<td class="px-3 py-2">J. Smith</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="documents" class="tab-content">
<div class="mt-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-700">Project Documents</h3>
<div class="flex space-x-2">
<button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
<i class="fas fa-upload mr-1"></i> Upload
</button>
<button class="px-3 py-1 bg-green-600 text-white rounded hover:bg-green-700 flex items-center">
<i class="fas fa-file-pdf mr-1"></i> Generate Report
</button>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Photo Card -->
<div class="bg-white rounded border overflow-hidden hover:shadow-md transition-shadow">
<div class="h-40 bg-gray-100 flex items-center justify-center">
<img src="https://images.unsplash.com/photo-1560518883-ce09059eeffa?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=500&q=80" alt="Damage photo" class="h-full w-full object-cover">
</div>
<div class="p-3">
<h4 class="font-medium text-sm">Kitchen water damage</h4>
<p class="text-xs text-gray-500 mt-1">Uploaded: 06/16/2023 by M. Johnson</p>
<div class="flex justify-between items-center mt-2">
<span class="px-2 py-1 bg-blue-100 text-blue-800 rounded-full text-xs">Photo</span>
<div class="flex space-x-2">
<button class="text-blue-500 hover:text-blue-700">
<i class="fas fa-download"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Document Card -->
<div class="bg-white rounded border overflow-hidden hover:shadow-md transition-shadow">
<div class="h-40 bg-gray-100 flex items-center justify-center text-gray-400">
<i class="fas fa-file-pdf text-5xl"></i>
</div>
<div class="p-3">
<h4 class="font-medium text-sm">Initial Assessment Report</h4>
<p class="text-xs text-gray-500 mt-1">Created: 06/16/2023 by M. Johnson</p>
<div class="flex justify-between items-center mt-2">
<span class="px-2 py-1 bg-purple-100 text-purple-800 rounded-full text-xs">Report</span>
<div class="flex space-x-2">
<button class="text-blue-500 hover:text-blue-700">
<i class="fas fa-download"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
<!-- Moisture Log Card -->
<div class="bg-white rounded border overflow-hidden hover:shadow-md transition-shadow">
<div class="h-40 bg-gray-100 flex items-center justify-center text-gray-400">
<i class="fas fa-chart-line text-5xl"></i>
</div>
<div class="p-3">
<h4 class="font-medium text-sm">Daily Moisture Log - 06/17</h4>
<p class="text-xs text-gray-500 mt-1">Created: 06/17/2023 by J. Smith</p>
<div class="flex justify-between items-center mt-2">
<span class="px-2 py-1 bg-green-100 text-green-800 rounded-full text-xs">Log</span>
<div class="flex space-x-2">
<button class="text-blue-500 hover:text-blue-700">
<i class="fas fa-download"></i>
</button>
<button class="text-red-500 hover:text-red-700">
<i class="fas fa-trash"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="team" class="tab-content">
<div class="mt-4">
<div class="flex justify-between items-center mb-4">
<h3 class="font-medium text-gray-700">Project Team</h3>
<button class="px-3 py-1 bg-blue-600 text-white rounded hover:bg-blue-700 flex items-center">
<i class="fas fa-plus mr-1"></i> Assign Team
</button>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
<!-- Team Member Card -->
<div class="bg-white rounded border p-4 hover:shadow-md transition-shadow">
<div class="flex items-center space-x-3">
<div class="h-12 w-12 rounded-full bg-blue-100 flex items-center justify-center">
<span class="font-semibold text-blue-800">MJ</span>
</div>
<div>
<h4 class="font-medium">Mike Johnson</h4>
<p class="text-sm text-gray-500">Lead Water Tech</p>
</div>
</div>
<div class="mt-3">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Tasks:</span>
<span>5 assigned, 3 completed</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
<div class="bg-green-500 h-2 rounded-full" style="width: 60%"></div>
</div>
</div>
<div class="mt-3 flex justify-between">
<button class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm hover:bg-blue-200">
<i class="fas fa-envelope mr-1"></i> Message
</button>
<button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm hover:bg-gray-200">
<i class="fas fa-tasks mr-1"></i> Tasks
</button>
</div>
</div>
<!-- Team Member Card -->
<div class="bg-white rounded border p-4 hover:shadow-md transition-shadow">
<div class="flex items-center space-x-3">
<div class="h-12 w-12 rounded-full bg-green-100 flex items-center justify-center">
<span class="font-semibold text-green-800">JS</span>
</div>
<div>
<h4 class="font-medium">Jane Smith</h4>
<p class="text-sm text-gray-500">Field Tech II</p>
</div>
</div>
<div class="mt-3">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Tasks:</span>
<span>4 assigned, 2 completed</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
<div class="bg-yellow-500 h-2 rounded-full" style="width: 50%"></div>
</div>
</div>
<div class="mt-3 flex justify-between">
<button class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm hover:bg-blue-200">
<i class="fas fa-envelope mr-1"></i> Message
</button>
<button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm hover:bg-gray-200">
<i class="fas fa-tasks mr-1"></i> Tasks
</button>
</div>
</div>
<!-- Team Member Card -->
<div class="bg-white rounded border p-4 hover:shadow-md transition-shadow">
<div class="flex items-center space-x-3">
<div class="h-12 w-12 rounded-full bg-purple-100 flex items-center justify-center">
<span class="font-semibold text-purple-800">TD</span>
</div>
<div>
<h4 class="font-medium">Tom Davis</h4>
<p class="text-sm text-gray-500">Contents Specialist</p>
</div>
</div>
<div class="mt-3">
<div class="flex justify-between text-sm">
<span class="text-gray-500">Tasks:</span>
<span>3 assigned, 1 completed</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-2 mt-1">
<div class="bg-red-500 h-2 rounded-full" style="width: 33%"></div>
</div>
</div>
<div class="mt-3 flex justify-between">
<button class="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm hover:bg-blue-200">
<i class="fas fa-envelope mr-1"></i> Message
</button>
<button class="px-2 py-1 bg-gray-100 text-gray-800 rounded text-sm hover:bg-gray-200">
<i class="fas fa-tasks mr-1"></i> Tasks
</button>
</div>
</div>
</div>
<div class="mt-6">
<h3 class="font-medium text-gray-700 mb-3">Team Communication</h3>
<div class="bg-gray-50 p-4 rounded border">
<div class="flex items-start space-x-3 mb-4">
<div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
<span class="font-semibold text-blue-800">AD</span>
</div>
<div class="flex-1">
<div class="bg-white p-3 rounded-lg border">
<p class="text-sm">Team, please make sure to complete all moisture readings by 3pm today. The adjuster will be reviewing our progress tomorrow morning.</p>
</div>
<p class="text-xs text-gray-500 mt-1">Today, 8:30 AM</p>
</div>
</div>
<div class="flex items-start space-x-3">
<div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
<span class="font-semibold text-green-800">JS</span>
</div>
<div class="flex-1">
<div class="bg-white p-3 rounded-lg border">
<p class="text-sm">Understood. I've completed the living room readings and will move to the bedrooms next.</p>
</div>
<p class="text-xs text-gray-500 mt-1">Today, 8:45 AM</p>
</div>
</div>
<div class="mt-4">
<div class="flex items-center space-x-3">
<div class="h-10 w-10 rounded-full bg-gray-100 flex items-center justify-center">
<i class="fas fa-user text-gray-500"></i>
</div>
<div class="flex-1">
<input type="text" placeholder="Type a message..." class="w-full px-3 py-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500">
</div>
<button class="px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</div>
<!-- Initialize Map (simplified for demo) -->
<script>
function initMap() {
// This would be replaced with actual Google Maps API code
const mapElement = document.getElementById('map');
mapElement.innerHTML = '<div class="h-full w-full bg-gray-200 flex items-center justify-center text-gray-500"><i class="fas fa-map-marker-alt text-3xl mr-2"></i><span>Project Location Map</span></div>';
}
// Tab functionality
function openTab(evt, tabName) {
evt.preventDefault();
const tabContents = document.getElementsByClassName('tab-content');
for (let i = 0; i < tabContents.length; i++) {
tabContents[i].classList.remove('active');
}
const tabButtons = document.getElementsByClassName('tab-button');
for (let i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove('border-blue-500', 'text-blue-600');
tabButtons[i].classList.add('border-transparent', 'text-gray-500');
}
document.getElementById(tabName).classList.add('active');
evt.currentTarget.classList.remove('border-transparent', 'text-gray-500');
evt.currentTarget.classList.add('border-blue-500', 'text-blue-600');
}
// Dropdown functionality
function toggleDropdown(button) {
const dropdown = button.nextElementSibling;
dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
}
// Mobile sidebar toggle
function toggleSidebar() {
const sidebar = document.querySelector('.sidebar');
sidebar.classList.toggle('-translate-x-full');
}
// Initialize the page
document.addEventListener('DOMContentLoaded', function() {
initMap();
// Set up event listeners
document.querySelectorAll('.dropdown button').forEach(button => {
button.addEventListener('click', () => toggleDropdown(button));
});
// Mobile menu button
document.querySelector('header button').addEventListener('click', toggleSidebar);
document.querySelector('.sidebar button').addEventListener('click', toggleSidebar);
// Prevent default for all buttons to avoid page jumps
document.querySelectorAll('button').forEach(button => {
button.addEventListener('click', (e) => {
if (!button.hasAttribute('type') || button.getAttribute('type') !== 'submit') {
e.preventDefault();
}
});
});
// Simulate form submission for demo purposes
document.querySelectorAll('form').forEach(form => {
form.addEventListener('submit', (e) => {
e.preventDefault();
alert('Form submitted (demo)');
});
});
});
</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=ToasterBaptism/water-mitigation" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>