Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FreelanceFlow - Project 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 Tailwind can't handle easily */ | |
| .file-upload { | |
| position: relative; | |
| overflow: hidden; | |
| display: inline-block; | |
| } | |
| .file-upload input[type="file"] { | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| opacity: 0; | |
| } | |
| .rich-text-editor { | |
| min-height: 150px; | |
| border: 1px solid #e2e8f0; | |
| border-radius: 0.375rem; | |
| padding: 0.75rem; | |
| } | |
| .rich-text-editor:focus { | |
| outline: none; | |
| border-color: #93c5fd; | |
| box-shadow: 0 0 0 3px rgba(147, 197, 253, 0.5); | |
| } | |
| .message-bubble { | |
| max-width: 80%; | |
| word-wrap: break-word; | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| .scrollbar-hide { | |
| -ms-overflow-style: none; | |
| scrollbar-width: none; | |
| } | |
| .progress-step { | |
| position: relative; | |
| } | |
| .progress-step:not(:last-child):after { | |
| content: ''; | |
| position: absolute; | |
| top: 24px; | |
| left: 50%; | |
| height: 100%; | |
| width: 2px; | |
| background-color: #e2e8f0; | |
| transform: translateX(-50%); | |
| } | |
| .progress-step.active:not(:last-child):after { | |
| background-color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Navigation Sidebar (hidden on mobile, shown on larger screens) --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-white border-r border-gray-200"> | |
| <div class="flex items-center justify-center h-16 px-4 bg-blue-600 text-white"> | |
| <span class="text-xl font-bold">FreelanceFlow</span> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <nav class="flex-1 space-y-2"> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-white bg-blue-100 rounded-md text-blue-700"> | |
| <i class="fas fa-home mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-blue-50 hover:text-blue-700"> | |
| <i class="fas fa-project-diagram mr-3"></i> | |
| My Projects | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-blue-50 hover:text-blue-700"> | |
| <i class="fas fa-file-alt mr-3"></i> | |
| Proposals | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-blue-50 hover:text-blue-700"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| Messages | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-blue-50 hover:text-blue-700"> | |
| <i class="fas fa-clock mr-3"></i> | |
| Time Tracking | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 rounded-md hover:bg-blue-50 hover:text-blue-700"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </nav> | |
| </div> | |
| <div class="p-4 border-t border-gray-200"> | |
| <div class="flex items-center"> | |
| <img class="w-10 h-10 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Profile"> | |
| <div class="ml-3"> | |
| <p class="text-sm font-medium text-gray-700">Sarah Johnson</p> | |
| <p class="text-xs font-medium text-gray-500">Freelance Designer</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Mobile Bottom Navigation --> | |
| <div class="md:hidden fixed inset-x-0 bottom-0 bg-white shadow-lg z-10"> | |
| <div class="flex justify-around"> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-blue-600"> | |
| <i class="fas fa-home"></i> | |
| <span class="text-xs mt-1">Home</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-project-diagram"></i> | |
| <span class="text-xs mt-1">Projects</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-file-alt"></i> | |
| <span class="text-xs mt-1">Proposals</span> | |
| </a> | |
| <a href="#" class="flex flex-col items-center justify-center p-3 text-gray-500"> | |
| <i class="fas fa-envelope"></i> | |
| <span class="text-xs mt-1">Messages</span> | |
| </a> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="md:ml-64 flex flex-col flex-1 overflow-hidden"> | |
| <!-- Mobile Top Header --> | |
| <div class="md:hidden flex items-center justify-between px-4 py-3 bg-white border-b border-gray-200"> | |
| <div class="text-lg font-semibold text-gray-800">FreelanceFlow</div> | |
| <button class="p-2 rounded-md text-gray-500 hover:text-gray-600 hover:bg-gray-50"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <!-- Dashboard View --> | |
| <div id="dashboard-view" class="flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Welcome Header --> | |
| <div class="flex items-center justify-between mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Welcome back, Sarah!</h1> | |
| <p class="text-gray-600">Here's what's happening with your projects</p> | |
| </div> | |
| <button class="hidden md:flex items-center px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Project | |
| </button> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6"> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-3"> | |
| <i class="fas fa-project-diagram"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Active Projects</p> | |
| <p class="text-xl font-semibold">5</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-3"> | |
| <i class="fas fa-check-circle"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Completed</p> | |
| <p class="text-xl font-semibold">12</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-100"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-3"> | |
| <i class="fas fa-clock"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm text-gray-500">Pending</p> | |
| <p class="text-xl font-semibold">3</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Active Projects --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Active Projects</h2> | |
| <a href="#" class="text-sm text-blue-600 hover:underline">View All</a> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Project Card 1 --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">E-commerce Website Redesign</h3> | |
| <p class="text-sm text-gray-500">Client: FashionHub Inc.</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">In Progress</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm mb-2"> | |
| <span class="text-gray-600">Progress</span> | |
| <span class="font-medium">65%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 65%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-50 text-gray-600 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-envelope mr-1"></i> Message | |
| </button> | |
| </div> | |
| <div class="text-sm font-medium text-gray-700">$2,500</div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Card 2 --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"> | |
| <div class="p-4"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h3 class="font-medium text-gray-800">Mobile App UI/UX</h3> | |
| <p class="text-sm text-gray-500">Client: TechStart LLC</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Awaiting Feedback</span> | |
| </div> | |
| <div class="mt-4"> | |
| <div class="flex items-center justify-between text-sm mb-2"> | |
| <span class="text-gray-600">Progress</span> | |
| <span class="font-medium">30%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2"> | |
| <div class="bg-blue-600 h-2 rounded-full" style="width: 30%"></div> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 text-sm bg-blue-50 text-blue-600 rounded-md hover:bg-blue-100"> | |
| <i class="fas fa-eye mr-1"></i> View | |
| </button> | |
| <button class="px-3 py-1 text-sm bg-gray-50 text-gray-600 rounded-md hover:bg-gray-100"> | |
| <i class="fas fa-envelope mr-1"></i> Message | |
| </button> | |
| </div> | |
| <div class="text-sm font-medium text-gray-700">$1,800</div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Messages --> | |
| <div class="mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h2 class="text-lg font-semibold text-gray-800">Recent Messages</h2> | |
| <a href="#" class="text-sm text-blue-600 hover:underline">View All</a> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 overflow-hidden"> | |
| <div class="divide-y divide-gray-100"> | |
| <!-- Message 1 --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Michael Brown</h4> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Hi Sarah, I've reviewed the latest mockups and they look great! Just a few minor tweaks needed...</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message 2 --> | |
| <div class="p-4 hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Jessica Wilson</h4> | |
| <span class="text-xs text-gray-500">1 day ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">When can we schedule a call to discuss the project timeline?</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Floating Action Button (Mobile) --> | |
| <div class="md:hidden fixed bottom-20 right-4"> | |
| <button class="w-14 h-14 flex items-center justify-center rounded-full bg-blue-600 text-white shadow-lg hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus text-xl"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Details View (Hidden by default) --> | |
| <div id="project-details-view" class="hidden flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Back Button --> | |
| <button onclick="showView('dashboard-view')" class="flex items-center text-blue-600 mb-4"> | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| Back to Projects | |
| </button> | |
| <!-- Project Header --> | |
| <div class="flex items-start justify-between mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">E-commerce Website Redesign</h1> | |
| <p class="text-gray-600">Client: FashionHub Inc.</p> | |
| </div> | |
| <div class="flex space-x-2"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane mr-2"></i> | |
| Submit Proposal | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Project Status --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <div class="flex flex-wrap items-center justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-medium text-gray-800 mb-1">Project Status</h3> | |
| <div class="flex items-center"> | |
| <span class="px-3 py-1 text-sm font-medium rounded-full bg-green-100 text-green-800">In Progress</span> | |
| <span class="ml-2 text-sm text-gray-600">Iteration 2/4</span> | |
| </div> | |
| </div> | |
| <div class="mb-4 md:mb-0"> | |
| <h3 class="font-medium text-gray-800 mb-1">Budget</h3> | |
| <p class="text-gray-700">$2,500 ($1,000 paid)</p> | |
| </div> | |
| <div> | |
| <h3 class="font-medium text-gray-800 mb-1">Timeline</h3> | |
| <p class="text-gray-700">May 15 - Jun 30, 2023</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Progress --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Project Progress</h3> | |
| <div class="mb-3"> | |
| <div class="flex items-center justify-between text-sm mb-1"> | |
| <span class="text-gray-600">Overall Completion</span> | |
| <span class="font-medium">45%</span> | |
| </div> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-5 gap-2 text-center text-xs mt-4"> | |
| <div class="progress-step active"> | |
| <div class="w-10 h-10 mx-auto bg-blue-600 rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="mt-2 font-medium">Proposal</p> | |
| </div> | |
| <div class="progress-step active"> | |
| <div class="w-10 h-10 mx-auto bg-blue-600 rounded-full flex items-center justify-center text-white"> | |
| <i class="fas fa-check"></i> | |
| </div> | |
| <p class="mt-2 font-medium">Design</p> | |
| </div> | |
| <div class="progress-step"> | |
| <div class="w-10 h-10 mx-auto bg-gray-200 rounded-full flex items-center justify-center text-gray-600"> | |
| 3 | |
| </div> | |
| <p class="mt-2 font-medium">Development</p> | |
| </div> | |
| <div class="progress-step"> | |
| <div class="w-10 h-10 mx-auto bg-gray-200 rounded-full flex items-center justify-center text-gray-600"> | |
| 4 | |
| </div> | |
| <p class="mt-2 font-medium">Testing</p> | |
| </div> | |
| <div class="progress-step"> | |
| <div class="w-10 h-10 mx-auto bg-gray-200 rounded-full flex items-center justify-center text-gray-600"> | |
| 5 | |
| </div> | |
| <p class="mt-2 font-medium">Delivery</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Project Scope --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium text-gray-800">Project Scope</h3> | |
| <button class="text-sm text-blue-600 hover:underline">Edit Scope</button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Scope Item 1 --> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <span class="ml-3 text-gray-700">Homepage Design</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">$500</span> | |
| </div> | |
| <!-- Scope Item 2 --> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <span class="ml-3 text-gray-700">Product Listing Page</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">$600</span> | |
| </div> | |
| <!-- Scope Item 3 --> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded"> | |
| <span class="ml-3 text-gray-700">Checkout Flow</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">$800</span> | |
| </div> | |
| <!-- Scope Item 4 --> | |
| <div class="flex items-center justify-between p-3 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded"> | |
| <span class="ml-3 text-gray-700">Mobile Responsive</span> | |
| </div> | |
| <span class="text-sm font-medium text-gray-700">$600</span> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium text-gray-800">Total</span> | |
| <span class="font-medium text-gray-800">$2,500</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Recent Iterations --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium text-gray-800">Recent Iterations</h3> | |
| <button class="text-sm text-blue-600 hover:underline">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Iteration 1 --> | |
| <div class="p-3 border border-gray-200 rounded-md hover:border-blue-200 hover:bg-blue-50 cursor-pointer"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Design Mockups v2</h4> | |
| <p class="text-sm text-gray-600">Submitted: May 28, 2023</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">Approved</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-file-image mr-2"></i> | |
| <span>3 files attached</span> | |
| </div> | |
| </div> | |
| <!-- Iteration 2 --> | |
| <div class="p-3 border border-gray-200 rounded-md hover:border-blue-200 hover:bg-blue-50 cursor-pointer"> | |
| <div class="flex items-start justify-between"> | |
| <div> | |
| <h4 class="font-medium text-gray-800">Design Mockups v1</h4> | |
| <p class="text-sm text-gray-600">Submitted: May 20, 2023</p> | |
| </div> | |
| <span class="px-2 py-1 text-xs font-medium rounded-full bg-yellow-100 text-yellow-800">Feedback</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-600"> | |
| <i class="fas fa-file-image mr-2"></i> | |
| <span>2 files attached</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 px-4 py-2 border-2 border-dashed border-gray-300 rounded-md text-gray-500 hover:text-gray-700 hover:border-gray-400 transition"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Submit New Iteration | |
| </button> | |
| </div> | |
| <!-- Project Messages --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4"> | |
| <h3 class="font-medium text-gray-800 mb-4">Project Messages</h3> | |
| <div class="space-y-4 mb-4 max-h-96 overflow-y-auto scrollbar-hide"> | |
| <!-- Message from Client --> | |
| <div class="flex items-start"> | |
| <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client"> | |
| <div class="message-bubble bg-gray-100 rounded-lg p-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">Michael Brown</span> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Hi Sarah, I've reviewed the latest mockups and they look great! Just a few minor tweaks needed on the product page layout.</p> | |
| </div> | |
| </div> | |
| <!-- Message from You --> | |
| <div class="flex items-start justify-end"> | |
| <div class="message-bubble bg-blue-100 rounded-lg p-3"> | |
| <div class="flex items-center justify-between mb-1"> | |
| <span class="text-sm font-medium text-gray-800">You</span> | |
| <span class="text-xs text-gray-500">1 hour ago</span> | |
| </div> | |
| <p class="text-sm text-gray-700">Thanks Michael! I'll make those changes and send over the updated files by tomorrow.</p> | |
| </div> | |
| <img class="w-8 h-8 rounded-full ml-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="You"> | |
| </div> | |
| </div> | |
| <div class="border-t border-gray-200 pt-4"> | |
| <div class="flex"> | |
| <input type="text" placeholder="Type your message..." class="flex-1 px-4 py-2 border border-gray-300 rounded-l-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-r-md hover:bg-blue-700"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 flex items-center"> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <button class="p-2 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-image"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposal Creation View (Hidden by default) --> | |
| <div id="proposal-creation-view" class="hidden flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Back Button --> | |
| <button onclick="showView('dashboard-view')" class="flex items-center text-blue-600 mb-4"> | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| Back to Projects | |
| </button> | |
| <!-- Proposal Header --> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Create New Proposal</h1> | |
| <p class="text-gray-600">For project: E-commerce Website Redesign</p> | |
| </div> | |
| <!-- Client Info --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Client Information</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Client Name</label> | |
| <input type="text" value="FashionHub Inc." class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" readonly> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Contact Email</label> | |
| <input type="email" value="contact@fashionhub.com" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" readonly> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposal Scope --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <div class="flex items-center justify-between mb-3"> | |
| <h3 class="font-medium text-gray-800">Project Scope</h3> | |
| <button class="text-sm text-blue-600 hover:underline">Add Custom Item</button> | |
| </div> | |
| <div class="space-y-3 mb-4"> | |
| <!-- Scope Item 1 --> | |
| <div class="flex items-start p-3 bg-gray-50 rounded-md"> | |
| <input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded" checked> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium text-gray-800">Homepage Design</span> | |
| <span class="text-sm font-medium text-gray-700">$500</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Complete redesign of the homepage including hero banner, featured products section, and navigation menu.</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500 mr-3">Adjust price:</span> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">-</button> | |
| <input type="text" value="500" class="w-16 mx-2 px-2 py-1 border border-gray-300 rounded-md text-center"> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scope Item 2 --> | |
| <div class="flex items-start p-3 bg-gray-50 rounded-md"> | |
| <input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded" checked> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium text-gray-800">Product Listing Page</span> | |
| <span class="text-sm font-medium text-gray-700">$600</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Design of category pages with product filtering, sorting options, and grid/list view toggles.</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500 mr-3">Adjust price:</span> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">-</button> | |
| <input type="text" value="600" class="w-16 mx-2 px-2 py-1 border border-gray-300 rounded-md text-center"> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Scope Item 3 --> | |
| <div class="flex items-start p-3 bg-gray-50 rounded-md"> | |
| <input type="checkbox" class="mt-1 h-4 w-4 text-blue-600 rounded"> | |
| <div class="ml-3 flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <span class="font-medium text-gray-800">Checkout Flow</span> | |
| <span class="text-sm font-medium text-gray-700">$800</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Multi-step checkout process with cart review, shipping options, payment methods, and order confirmation.</p> | |
| <div class="mt-2 flex items-center"> | |
| <span class="text-xs text-gray-500 mr-3">Adjust price:</span> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">-</button> | |
| <input type="text" value="800" class="w-16 mx-2 px-2 py-1 border border-gray-300 rounded-md text-center"> | |
| <button class="w-6 h-6 flex items-center justify-center border border-gray-300 rounded-md bg-white text-gray-600 hover:bg-gray-50">+</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-4 pt-4 border-t border-gray-200"> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-600">Subtotal</span> | |
| <span class="font-medium text-gray-800">$1,900</span> | |
| </div> | |
| <div class="flex items-center justify-between mb-2"> | |
| <span class="text-gray-600">Tax (10%)</span> | |
| <span class="font-medium text-gray-800">$190</span> | |
| </div> | |
| <div class="flex items-center justify-between text-lg font-bold"> | |
| <span class="text-gray-800">Total</span> | |
| <span class="text-blue-600">$2,090</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Payment Terms --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Payment Terms</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Payment Schedule</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>50% upfront, 50% on delivery</option> | |
| <option>30% upfront, 70% on delivery</option> | |
| <option>100% on delivery</option> | |
| <option>Custom</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Payment Method</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Bank Transfer</option> | |
| <option>PayPal</option> | |
| <option>Credit Card</option> | |
| <option>Other</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project Timeline</label> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Start Date</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-xs text-gray-500 mb-1">Delivery Date</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Proposal Message --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Proposal Message</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Subject</label> | |
| <input type="text" value="Proposal for E-commerce Website Redesign" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Message</label> | |
| <div class="rich-text-editor" contenteditable="true"> | |
| <p>Dear Michael,</p> | |
| <p class="mt-2">Thank you for the opportunity to work on your e-commerce website redesign. I've carefully reviewed your requirements and prepared this proposal outlining the scope of work, timeline, and budget.</p> | |
| <p class="mt-2">Please review the details below and let me know if you have any questions or would like to discuss any adjustments.</p> | |
| <p class="mt-2">Looking forward to your feedback!</p> | |
| <p class="mt-2">Best regards,<br>Sarah Johnson</p> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-2">Attachments</label> | |
| <div class="file-upload"> | |
| <button class="px-4 py-2 bg-gray-100 border border-gray-300 rounded-md text-gray-700 hover:bg-gray-200"> | |
| <i class="fas fa-paperclip mr-2"></i> | |
| Add Files | |
| </button> | |
| <input type="file" multiple> | |
| </div> | |
| <div class="mt-2 text-sm text-gray-500">You can attach design mockups, contracts, or other relevant files</div> | |
| </div> | |
| </div> | |
| <!-- Submit Proposal --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4"> | |
| <h3 class="font-medium text-gray-800 mb-3">Ready to Send</h3> | |
| <div class="flex flex-col md:flex-row md:items-center md:justify-between"> | |
| <div class="mb-4 md:mb-0"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Send a copy to my email</span> | |
| </div> | |
| <div class="flex items-center mt-2"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 rounded" checked> | |
| <span class="ml-2 text-sm text-gray-700">Request digital signature</span> | |
| </div> | |
| </div> | |
| <div> | |
| <button class="w-full md:w-auto px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane mr-2"></i> | |
| Send Proposal | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Iteration Submission View (Hidden by default) --> | |
| <div id="iteration-submission-view" class="hidden flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Back Button --> | |
| <button onclick="showView('project-details-view')" class="flex items-center text-blue-600 mb-4"> | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| Back to Project | |
| </button> | |
| <!-- Iteration Header --> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Submit New Iteration</h1> | |
| <p class="text-gray-600">For project: E-commerce Website Redesign</p> | |
| </div> | |
| <!-- Iteration Details --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Iteration Details</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Title</label> | |
| <input type="text" placeholder="e.g., Design Mockups v3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <textarea rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="Describe what's included in this iteration and any important notes for the client..."></textarea> | |
| </div> | |
| </div> | |
| <!-- Files Upload --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Files</h3> | |
| <div class="border-2 border-dashed border-gray-300 rounded-md p-6 text-center"> | |
| <i class="fas fa-cloud-upload-alt text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-600 mb-2">Drag and drop files here or</p> | |
| <div class="file-upload"> | |
| <button class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-folder-open mr-2"></i> | |
| Browse Files | |
| </button> | |
| <input type="file" multiple> | |
| </div> | |
| <p class="mt-3 text-sm text-gray-500">Supported formats: JPG, PNG, PDF, ZIP (Max 50MB each)</p> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-2">Uploaded Files</h4> | |
| <div class="space-y-2"> | |
| <div class="flex items-center justify-between p-2 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-image text-blue-500 mr-3"></i> | |
| <span class="text-sm text-gray-700">mockup-homepage-v3.jpg</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-500 mr-3">2.4 MB</span> | |
| <button class="p-1 text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="flex items-center justify-between p-2 bg-gray-50 rounded-md"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-file-image text-blue-500 mr-3"></i> | |
| <span class="text-sm text-gray-700">mockup-product-v3.jpg</span> | |
| </div> | |
| <div class="flex items-center"> | |
| <span class="text-xs text-gray-500 mr-3">1.8 MB</span> | |
| <button class="p-1 text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-times"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Update --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Status Update</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Current Status</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Submitted for Review</option> | |
| <option>In Progress</option> | |
| <option>Pending Feedback</option> | |
| <option>Completed</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Percent Complete</label> | |
| <div class="flex items-center"> | |
| <input type="range" min="0" max="100" value="75" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> | |
| <span class="ml-3 text-sm font-medium text-gray-700">75%</span> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Button --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4"> | |
| <button class="w-full px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| Submit Iteration | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Messages View (Hidden by default) --> | |
| <div id="messages-view" class="hidden flex-1 overflow-y-auto"> | |
| <div class="flex flex-col h-full"> | |
| <!-- Messages Header --> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200 bg-white"> | |
| <div class="flex items-center"> | |
| <button onclick="showView('dashboard-view')" class="md:hidden mr-3 text-gray-500"> | |
| <i class="fas fa-arrow-left"></i> | |
| </button> | |
| <h2 class="text-lg font-semibold text-gray-800">Messages</h2> | |
| </div> | |
| <button class="p-2 text-gray-500 hover:text-gray-700 hover:bg-gray-100 rounded-md"> | |
| <i class="fas fa-search"></i> | |
| </button> | |
| </div> | |
| <!-- Messages List --> | |
| <div class="flex-1 overflow-y-auto bg-gray-50"> | |
| <!-- Message Thread 1 --> | |
| <div class="p-4 border-b border-gray-200 bg-white hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Client"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Michael Brown</h4> | |
| <span class="text-xs text-gray-500">2 hours ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Hi Sarah, I've reviewed the latest mockups and they look great! Just a few minor tweaks needed...</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-blue-500 mr-1"></span> | |
| <span>E-commerce Website Redesign</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Thread 2 --> | |
| <div class="p-4 border-b border-gray-200 bg-white hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">Jessica Wilson</h4> | |
| <span class="text-xs text-gray-500">1 day ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">When can we schedule a call to discuss the project timeline?</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-green-500 mr-1"></span> | |
| <span>Mobile App UI/UX</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Message Thread 3 --> | |
| <div class="p-4 border-b border-gray-200 bg-white hover:bg-gray-50 cursor-pointer"> | |
| <div class="flex items-start"> | |
| <img class="w-10 h-10 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client"> | |
| <div class="flex-1"> | |
| <div class="flex items-center justify-between"> | |
| <h4 class="font-medium text-gray-800">David Miller</h4> | |
| <span class="text-xs text-gray-500">3 days ago</span> | |
| </div> | |
| <p class="text-sm text-gray-600 mt-1">Thanks for sending over the proposal. I'll review it and get back to you by Friday.</p> | |
| <div class="mt-2 flex items-center text-xs text-gray-500"> | |
| <span class="inline-block w-2 h-2 rounded-full bg-purple-500 mr-1"></span> | |
| <span>Brand Identity Design</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- New Message Button --> | |
| <div class="p-4 bg-white border-t border-gray-200"> | |
| <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-plus mr-2"></i> | |
| New Message | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Review View (Hidden by default) --> | |
| <div id="review-view" class="hidden flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Back Button --> | |
| <button onclick="showView('project-details-view')" class="flex items-center text-blue-600 mb-4"> | |
| <i class="fas fa-arrow-left mr-2"></i> | |
| Back to Project | |
| </button> | |
| <!-- Review Header --> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Leave a Review</h1> | |
| <p class="text-gray-600">For project: E-commerce Website Redesign</p> | |
| </div> | |
| <!-- Iteration Preview --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Iteration Preview</h3> | |
| <div class="grid grid-cols-2 gap-4"> | |
| <div class="border border-gray-200 rounded-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x200" alt="Mockup" class="w-full h-auto"> | |
| </div> | |
| <div class="border border-gray-200 rounded-md overflow-hidden"> | |
| <img src="https://via.placeholder.com/300x200" alt="Mockup" class="w-full h-auto"> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <h4 class="text-sm font-medium text-gray-700 mb-1">Iteration Notes</h4> | |
| <p class="text-sm text-gray-600">Final design mockups for homepage and product pages including all requested changes from previous feedback.</p> | |
| </div> | |
| </div> | |
| <!-- Rating --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Rating</h3> | |
| <div class="flex items-center justify-center space-x-2 mb-4"> | |
| <button class="text-3xl text-gray-300 hover:text-yellow-400 focus:outline-none"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| <button class="text-3xl text-gray-300 hover:text-yellow-400 focus:outline-none"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| <button class="text-3xl text-gray-300 hover:text-yellow-400 focus:outline-none"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| <button class="text-3xl text-gray-300 hover:text-yellow-400 focus:outline-none"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| <button class="text-3xl text-gray-300 hover:text-yellow-400 focus:outline-none"> | |
| <i class="fas fa-star"></i> | |
| </button> | |
| </div> | |
| <div class="text-center text-sm text-gray-600">Tap to rate from 1 (worst) to 5 (best)</div> | |
| </div> | |
| <!-- Feedback --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Feedback</h3> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Overall Experience</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="How was your experience working with this freelancer?"></textarea> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Work Quality</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="How would you rate the quality of the delivered work?"></textarea> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Communication</label> | |
| <textarea rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500" placeholder="How was the communication throughout the project?"></textarea> | |
| </div> | |
| </div> | |
| <!-- Would You Recommend? --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Would You Recommend This Freelancer?</h3> | |
| <div class="flex items-center space-x-6"> | |
| <div class="flex items-center"> | |
| <input type="radio" name="recommend" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <label class="ml-2 block text-sm text-gray-700">Yes</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="radio" name="recommend" class="h-4 w-4 text-blue-600 focus:ring-blue-500"> | |
| <label class="ml-2 block text-sm text-gray-700">No</label> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Submit Review --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4"> | |
| <button class="w-full px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-check-circle mr-2"></i> | |
| Submit Review | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Time Tracking View (Hidden by default) --> | |
| <div id="time-tracking-view" class="hidden flex-1 overflow-y-auto p-4"> | |
| <div class="max-w-4xl mx-auto"> | |
| <!-- Header --> | |
| <div class="mb-6"> | |
| <h1 class="text-2xl font-bold text-gray-800">Time Tracking</h1> | |
| <p class="text-gray-600">Track and log hours worked on your projects</p> | |
| </div> | |
| <!-- Current Timer --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-6 mb-6 text-center"> | |
| <h3 class="font-medium text-gray-800 mb-2">E-commerce Website Redesign</h3> | |
| <div class="text-5xl font-mono font-bold text-gray-800 mb-6">02:45:18</div> | |
| <div class="flex justify-center space-x-4"> | |
| <button class="px-6 py-3 bg-green-600 text-white rounded-md hover:bg-green-700 transition"> | |
| <i class="fas fa-play mr-2"></i> | |
| Start | |
| </button> | |
| <button class="px-6 py-3 bg-red-600 text-white rounded-md hover:bg-red-700 transition"> | |
| <i class="fas fa-stop mr-2"></i> | |
| Stop | |
| </button> | |
| <button class="px-6 py-3 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition"> | |
| <i class="fas fa-plus mr-2"></i> | |
| Log Time | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Manual Time Entry --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4 mb-6"> | |
| <h3 class="font-medium text-gray-800 mb-3">Log Manual Time</h3> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Project</label> | |
| <select class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>E-commerce Website Redesign</option> | |
| <option>Mobile App UI/UX</option> | |
| <option>Brand Identity Design</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Date</label> | |
| <input type="date" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-4"> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Hours</label> | |
| <input type="number" min="0" step="0.25" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Minutes</label> | |
| <input type="number" min="0" max="59" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Rate ($/hr)</label> | |
| <input type="number" min="0" step="5" value="50" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| </div> | |
| <div class="mb-4"> | |
| <label class="block text-sm font-medium text-gray-700 mb-1">Description</label> | |
| <input type="text" placeholder="What did you work on?" class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| </div> | |
| <button class="w-full px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700"> | |
| <i class="fas fa-save mr-2"></i> | |
| Save Time Entry | |
| </button> | |
| </div> | |
| <!-- Time Logs --> | |
| <div class="bg-white rounded-lg shadow-sm border border-gray-100 p-4"> | |
| <div class="flex items-center justify-between mb-4"> | |
| <h3 class="font-medium text-gray-800">Time Logs</h3> | |
| <div class="flex items-center space-x-2"> | |
| <select class="px-3 py-1 border border-gray-300 rounded-md shadow-sm text-sm focus:outline-none focus:ring-blue-500 focus:border-blue-500"> | |
| <option>This Week</option> | |
| <option>This Month</option> | |
| <option>All Time</option> | |
| </select> | |
| <button class="p-1 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-download"></i> | |
| </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">Date</th> | |
| <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">Time</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Amount</th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th> | |
| <th scope="col" class="relative px-6 py-3"><span class="sr-only">Actions</span></th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 12, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">E-commerce Website</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">2.5 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$125.00</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">Billed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 10, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">E-commerce Website</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">3.0 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$150.00</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">Billed</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| <tr> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">Jun 8, 2023</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">Mobile App UI/UX</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">1.75 hours</td> | |
| <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">$87.50</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">Pending</span> | |
| </td> | |
| <td class="px-6 py-4 whitespace-nowrap text-right text-sm font-medium"> | |
| <button class="text-blue-600 hover:text-blue-900 mr-3">Edit</button> | |
| <button class="text-red-600 hover:text-red-900">Delete</button> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="mt-4 flex items-center justify-between"> | |
| <div class="text-sm text-gray-500">Showing <span class="font-medium">1</span> to <span class="font-medium">3</span> of <span class="font-medium">12</span> entries</div> | |
| <div class="flex space-x-2"> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Previous</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-white bg-blue-600 hover:bg-blue-700">1</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">2</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">3</button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">Next</button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Simple view switching for demo purposes | |
| function showView(viewId) { | |
| // Hide all views | |
| document.querySelectorAll('[id$="-view"]').forEach(view => { | |
| view.classList.add('hidden'); | |
| }); | |
| // Show the selected view | |
| document.getElementById(viewId).classList.remove('hidden'); | |
| } | |
| // Demo interactions | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Make project cards clickable to show project details | |
| document.querySelectorAll('[onclick="showView(\'project-details-view\')"]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| showView('project-details-view'); | |
| }); | |
| }); | |
| // Make message threads clickable to show messages view | |
| document.querySelectorAll('[onclick="showView(\'messages-view\')"]').forEach(button => { | |
| button.addEventListener('click', function() { | |
| showView('messages-view'); | |
| }); | |
| }); | |
| // Star rating interaction | |
| const stars = document.querySelectorAll('#review-view .fa-star'); | |
| stars.forEach((star, index) => { | |
| star.addEventListener('click', function() { | |
| // Reset all stars | |
| stars.forEach(s => s.classList.remove('text-yellow-400')); | |
| // Fill stars up to the clicked one | |
| for (let i = 0; i <= index; i++) { | |
| stars[i].classList.add('text-yellow-400'); | |
| stars[i].classList.remove('text-gray-300'); | |
| } | |
| }); | |
| }); | |
| // File upload display | |
| </html> |