Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Kanban CRM System</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> | |
| .kanban-column { | |
| min-height: 500px; | |
| transition: all 0.3s ease; | |
| } | |
| .kanban-card { | |
| transition: all 0.2s ease; | |
| } | |
| .kanban-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); | |
| } | |
| .dragging { | |
| opacity: 0.5; | |
| transform: scale(1.02); | |
| } | |
| .kanban-column.highlight { | |
| background-color: rgba(219, 234, 254, 0.5); | |
| } | |
| .progress-bar { | |
| height: 6px; | |
| transition: width 0.3s ease; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| transition: all 0.3s ease; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| @media (max-width: 768px) { | |
| .sidebar { | |
| transform: translateX(-100%); | |
| } | |
| .sidebar.active { | |
| transform: translateX(0); | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Mobile Menu Button --> | |
| <button id="menuToggle" class="md:hidden fixed top-4 left-4 z-50 bg-blue-600 text-white p-2 rounded-lg shadow-lg"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Sidebar --> | |
| <div id="sidebar" class="sidebar fixed inset-y-0 left-0 w-64 bg-gray-800 text-white p-4 shadow-lg z-40"> | |
| <div class="flex items-center mb-8"> | |
| <i class="fas fa-chart-line text-blue-400 text-2xl mr-2"></i> | |
| <h1 class="text-xl font-bold">Kanban CRM</h1> | |
| </div> | |
| <div class="mb-8"> | |
| <div class="flex items-center mb-4 p-2 rounded-lg bg-gray-700"> | |
| <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center mr-2"> | |
| <span class="text-sm font-bold">AD</span> | |
| </div> | |
| <div> | |
| <p class="font-medium">Admin User</p> | |
| <p class="text-xs text-gray-400">admin@example.com</p> | |
| </div> | |
| </div> | |
| </div> | |
| <nav> | |
| <ul class="space-y-2"> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg bg-gray-700 text-blue-400"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-users mr-3"></i> | |
| Clients | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-bullseye mr-3"></i> | |
| Leads | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-address-book mr-3"></i> | |
| Contacts | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-handshake mr-3"></i> | |
| Deals | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-chart-pie mr-3"></i> | |
| Reports | |
| </a> | |
| </li> | |
| <li> | |
| <a href="#" class="flex items-center p-2 rounded-lg hover:bg-gray-700"> | |
| <i class="fas fa-cog mr-3"></i> | |
| Settings | |
| </a> | |
| </li> | |
| </ul> | |
| </nav> | |
| <div class="absolute bottom-4 left-4 right-4"> | |
| <button class="w-full bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2"></i> New Deal | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="md:ml-64 p-4"> | |
| <!-- Header --> | |
| <header class="bg-white rounded-lg shadow-sm p-4 mb-6"> | |
| <div class="flex justify-between items-center"> | |
| <h1 class="text-2xl font-bold text-gray-800">Deal Pipeline</h1> | |
| <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-lg 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="bg-blue-600 hover:bg-blue-700 text-white py-2 px-4 rounded-lg flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> Filter | |
| </button> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Total Deals</p> | |
| <p class="text-2xl font-bold">124</p> | |
| </div> | |
| <div class="bg-blue-100 text-blue-600 p-2 rounded-lg"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> 12% from last month | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Active Leads</p> | |
| <p class="text-2xl font-bold">56</p> | |
| </div> | |
| <div class="bg-purple-100 text-purple-600 p-2 rounded-lg"> | |
| <i class="fas fa-bullseye"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> 8% from last month | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">New Clients</p> | |
| <p class="text-2xl font-bold">24</p> | |
| </div> | |
| <div class="bg-green-100 text-green-600 p-2 rounded-lg"> | |
| <i class="fas fa-users"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-red-500"> | |
| <i class="fas fa-arrow-down mr-1"></i> 5% from last month | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow-sm p-4"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <p class="text-gray-500 text-sm">Revenue</p> | |
| <p class="text-2xl font-bold">$124,560</p> | |
| </div> | |
| <div class="bg-yellow-100 text-yellow-600 p-2 rounded-lg"> | |
| <i class="fas fa-dollar-sign"></i> | |
| </div> | |
| </div> | |
| <div class="mt-2 text-sm text-green-500"> | |
| <i class="fas fa-arrow-up mr-1"></i> 18% from last month | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Kanban Board --> | |
| <div class="grid grid-cols-1 md:grid-cols-5 gap-4 mb-6"> | |
| <!-- Column 1: New Leads --> | |
| <div class="kanban-column bg-gray-100 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-gray-700">New Leads (24)</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Card 1 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-blue-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">TechCorp Inc.</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Enterprise software solutions</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>John Smith</span> | |
| <i class="fas fa-phone ml-3 mr-1"></i> | |
| <span>(555) 123-4567</span> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Added: 2 days ago</span> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded">Hot</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Green Energy LLC</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Renewable energy consulting</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Sarah Johnson</span> | |
| <i class="fas fa-envelope ml-3 mr-1"></i> | |
| <span>sarah@greenenergy.com</span> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Added: 1 week ago</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Warm</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg"> | |
| <i class="fas fa-plus mr-1"></i> Add Lead | |
| </button> | |
| </div> | |
| <!-- Column 2: Contacted --> | |
| <div class="kanban-column bg-gray-100 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-gray-700">Contacted (18)</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Card 1 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-purple-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Digital Marketing Pros</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Full-service digital marketing</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Michael Brown</span> | |
| <i class="fas fa-phone ml-3 mr-1"></i> | |
| <span>(555) 987-6543</span> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Last contact: Today</span> | |
| <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded">Follow-up</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-yellow-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">HealthPlus Clinics</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Healthcare management system</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Dr. Lisa Wong</span> | |
| <i class="fas fa-envelope ml-3 mr-1"></i> | |
| <span>lisa@healthplus.com</span> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Last contact: 2 days ago</span> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded">Pending</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg"> | |
| <i class="fas fa-plus mr-1"></i> Add Contact | |
| </button> | |
| </div> | |
| <!-- Column 3: Proposal Sent --> | |
| <div class="kanban-column bg-gray-100 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-gray-700">Proposal Sent (15)</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Card 1 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-indigo-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Global Logistics</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Supply chain optimization</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Robert Chen</span> | |
| <i class="fas fa-phone ml-3 mr-1"></i> | |
| <span>(555) 456-7890</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Proposal Value: <span class="font-medium">$45,000</span></p> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Sent: 3 days ago</span> | |
| <span class="bg-indigo-100 text-indigo-800 px-2 py-1 rounded">Reviewing</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-red-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">EduTech Solutions</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Learning management platform</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>David Wilson</span> | |
| <i class="fas fa-envelope ml-3 mr-1"></i> | |
| <span>david@edutech.com</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Proposal Value: <span class="font-medium">$28,500</span></p> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Sent: 1 week ago</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Urgent</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg"> | |
| <i class="fas fa-plus mr-1"></i> Add Proposal | |
| </button> | |
| </div> | |
| <!-- Column 4: Negotiation --> | |
| <div class="kanban-column bg-gray-100 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-gray-700">Negotiation (8)</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Card 1 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-pink-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">FinTech Innovations</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Mobile banking solution</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Emma Rodriguez</span> | |
| <i class="fas fa-phone ml-3 mr-1"></i> | |
| <span>(555) 789-0123</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Deal Size: <span class="font-medium">$62,000</span></p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-pink-500 h-1.5 rounded-full progress-bar" style="width: 75%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Last update: Yesterday</span> | |
| <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded">Finalizing</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-teal-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Retail Chain Co.</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Inventory management system</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>James Peterson</span> | |
| <i class="fas fa-envelope ml-3 mr-1"></i> | |
| <span>james@retailchain.com</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Deal Size: <span class="font-medium">$38,500</span></p> | |
| <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1"> | |
| <div class="bg-teal-500 h-1.5 rounded-full progress-bar" style="width: 50%"></div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Last update: 3 days ago</span> | |
| <span class="bg-teal-100 text-teal-800 px-2 py-1 rounded">Mid-stage</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg"> | |
| <i class="fas fa-plus mr-1"></i> Add Negotiation | |
| </button> | |
| </div> | |
| <!-- Column 5: Closed Won/Lost --> | |
| <div class="kanban-column bg-gray-100 rounded-lg p-4"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="font-bold text-gray-700">Closed (12)</h2> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| <div class="space-y-3"> | |
| <!-- Card 1 - Won --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-green-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">Cloud Services Ltd.</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Cloud migration services</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Thomas Wright</span> | |
| <i class="fas fa-phone ml-3 mr-1"></i> | |
| <span>(555) 234-5678</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Deal Value: <span class="font-medium text-green-600">$85,000</span></p> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Closed: 2 days ago</span> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded">Won</span> | |
| </div> | |
| </div> | |
| <!-- Card 2 - Lost --> | |
| <div class="kanban-card bg-white rounded-lg shadow p-4 border-l-4 border-red-500 draggable" draggable="true"> | |
| <div class="flex justify-between items-start mb-2"> | |
| <h3 class="font-medium">AutoParts Distributors</h3> | |
| <div class="dropdown relative"> | |
| <button class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| <div class="dropdown-content absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg z-10 py-1 hidden"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Edit</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Convert to Client</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100">Delete</a> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mb-3">Inventory tracking system</p> | |
| <div class="flex items-center text-xs text-gray-500 mb-3"> | |
| <i class="fas fa-user mr-1"></i> | |
| <span>Karen Miller</span> | |
| <i class="fas fa-envelope ml-3 mr-1"></i> | |
| <span>karen@autoparts.com</span> | |
| </div> | |
| <div class="mb-2"> | |
| <p class="text-xs text-gray-500">Potential Value: <span class="font-medium text-red-600">$42,000</span></p> | |
| </div> | |
| <div class="flex justify-between items-center text-xs"> | |
| <span class="text-gray-500">Closed: 1 week ago</span> | |
| <span class="bg-red-100 text-red-800 px-2 py-1 rounded">Lost</span> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full mt-4 py-2 text-gray-500 hover:text-gray-700 hover:bg-gray-200 rounded-lg"> | |
| <i class="fas fa-plus mr-1"></i> Add Closed Deal | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Recent Activity --> | |
| <div class="bg-white rounded-lg shadow-sm p-4 mb-6"> | |
| <div class="flex justify-between items-center mb-4"> | |
| <h2 class="text-xl font-bold text-gray-800">Recent Activity</h2> | |
| <button class="text-blue-600 hover:text-blue-800">View All</button> | |
| </div> | |
| <div class="space-y-4"> | |
| <!-- Activity 1 --> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-blue-100 text-blue-600 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm"> | |
| <span class="font-medium">You</span> closed a deal with <span class="font-medium">Cloud Services Ltd.</span> for <span class="font-medium text-green-600">$85,000</span> | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">2 hours ago</p> | |
| </div> | |
| </div> | |
| <!-- Activity 2 --> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-purple-100 text-purple-600 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-file-contract"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm"> | |
| <span class="font-medium">Sarah Johnson</span> from <span class="font-medium">Green Energy LLC</span> viewed your proposal | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">5 hours ago</p> | |
| </div> | |
| </div> | |
| <!-- Activity 3 --> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-yellow-100 text-yellow-600 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-phone"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm"> | |
| <span class="font-medium">You</span> had a call with <span class="font-medium">Robert Chen</span> about the negotiation | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">Yesterday</p> | |
| </div> | |
| </div> | |
| <!-- Activity 4 --> | |
| <div class="flex items-start"> | |
| <div class="w-8 h-8 rounded-full bg-red-100 text-red-600 flex items-center justify-center mr-3 mt-1"> | |
| <i class="fas fa-times-circle"></i> | |
| </div> | |
| <div class="flex-1"> | |
| <p class="text-sm"> | |
| Deal with <span class="font-medium">AutoParts Distributors</span> was marked as <span class="font-medium text-red-600">Lost</span> | |
| </p> | |
| <p class="text-xs text-gray-500 mt-1">2 days ago</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Mobile menu toggle | |
| document.getElementById('menuToggle').addEventListener('click', function() { | |
| document.getElementById('sidebar').classList.toggle('active'); | |
| }); | |
| // Drag and drop functionality | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const draggables = document.querySelectorAll('.draggable'); | |
| const kanbanColumns = document.querySelectorAll('.kanban-column'); | |
| draggables.forEach(draggable => { | |
| draggable.addEventListener('dragstart', () => { | |
| draggable.classList.add('dragging'); | |
| }); | |
| draggable.addEventListener('dragend', () => { | |
| draggable.classList.remove('dragging'); | |
| }); | |
| }); | |
| kanbanColumns.forEach(column => { | |
| column.addEventListener('dragover', e => { | |
| e.preventDefault(); | |
| const dragging = document.querySelector('.dragging'); | |
| column.classList.add('highlight'); | |
| const afterElement = getDragAfterElement(column, e.clientY); | |
| if (afterElement) { | |
| column.insertBefore(dragging, afterElement); | |
| } else { | |
| column.appendChild(dragging); | |
| } | |
| }); | |
| column.addEventListener('dragleave', () => { | |
| column.classList.remove('highlight'); | |
| }); | |
| column.addEventListener('drop', () => { | |
| column.classList.remove('highlight'); | |
| }); | |
| }); | |
| function getDragAfterElement(column, y) { | |
| const draggableElements = [...column.querySelectorAll('.draggable:not(.dragging)')]; | |
| return draggableElements.reduce((closest, child) => { | |
| const box = child.getBoundingClientRect(); | |
| const offset = y - box.top - box.height / 2; | |
| if (offset < 0 && offset > closest.offset) { | |
| return { offset: offset, element: child }; | |
| } else { | |
| return closest; | |
| } | |
| }, { offset: Number.NEGATIVE_INFINITY }).element; | |
| } | |
| }); | |
| // Dropdown functionality | |
| document.querySelectorAll('.dropdown').forEach(dropdown => { | |
| const button = dropdown.querySelector('button'); | |
| const content = dropdown.querySelector('.dropdown-content'); | |
| button.addEventListener('click', (e) => { | |
| e.stopPropagation(); | |
| content.style.display = content.style.display === 'block' ? 'none' : 'block'; | |
| }); | |
| }); | |
| // Close dropdowns when clicking elsewhere | |
| document.addEventListener('click', function() { | |
| document.querySelectorAll('.dropdown-content').forEach(content => { | |
| content.style.display = 'none'; | |
| }); | |
| }); | |
| </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=FirstEngineer/crm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |