| <!DOCTYPE html> |
| <html lang="en" class="h-full"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ProjectFlow Pro - Projects</title> |
| <link rel="stylesheet" href="style.css"> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
| <script src="https://unpkg.com/feather-icons"></script> |
| </head> |
| <body class="bg-gray-50 h-full"> |
| <custom-navbar></custom-navbar> |
| |
| <main class="container mx-auto px-4 py-8"> |
| <div class="flex justify-between items-center mb-8"> |
| <h1 class="text-2xl font-bold text-gray-800">All Projects</h1> |
| |
| <div class="flex gap-4"> |
| <div class="relative"> |
| <input type="text" placeholder="Search projects..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary focus:border-primary w-64"> |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> |
| <i data-feather="search" class="text-gray-400"></i> |
| </div> |
| </div> |
| |
| <button class="bg-primary text-white px-4 py-2 rounded-lg flex items-center gap-2 hover:bg-primary/90 transition"> |
| <i data-feather="plus"></i> New Project |
| </button> |
| </div> |
| </div> |
| |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> |
| |
| <div class="bg-white rounded-xl shadow-sm overflow-hidden hover:shadow-md transition hover-scale"> |
| <div class="h-2 bg-primary"></div> |
| <div class="p-6"> |
| <div class="flex justify-between items-start mb-4"> |
| <h3 class="font-bold text-lg">Website Redesign</h3> |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Active</span> |
| </div> |
| <p class="text-gray-600 mb-4">Redesign company website with modern UI/UX principles</p> |
| |
| <div class="mb-4"> |
| <div class="flex justify-between text-sm text-gray-500 mb-1"> |
| <span>Progress</span> |
| <span>65%</span> |
| </div> |
| <div class="w-full bg-gray-200 rounded-full h-2"> |
| <div class="bg-primary h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
|
|
| <div class="flex justify-between items-center text-sm"> |
| <div> |
| <p class="text-gray-500">Due Date</p> |
| <p class="text-gray-800">Jun 15, 2023</p> |
| </div> |
| <div class="flex -space-x-2"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/1" alt="Team member"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/2" alt="Team member"> |
| <img class="w-8 h-8 rounded-full border-2 border-white" src="http://static.photos/people/200x200/3" alt="Team member"> |
| </div> |
| </div> |
| </div> |
| {"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."} |
| </body> |
| </html> |
