Spaces:
Running
Running
The app tabs and sections along with the edit and pretty much everything doesn't when clicking on anything - Follow Up Deployment
1352995 verified Download index.html from ToasterBaptism/water-mitigation: direct link, hf CLI and curl.
- Browser
- Download file 64 kB
-
https://huggingface.co/spaces/ToasterBaptism/water-mitigation/resolve/main/index.html
- Command line
-
hf download hf://spaces/ToasterBaptism/water-mitigation/index.html
-
curl -L -o index.html https://huggingface.co/spaces/ToasterBaptism/water-mitigation/resolve/main/index.html
64 kB
| <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> |