Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Team CRM | Customer Relationship 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 scrollbar */ | |
| ::-webkit-scrollbar { | |
| width: 8px; | |
| } | |
| ::-webkit-scrollbar-track { | |
| background: #f1f1f1; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background: #888; | |
| border-radius: 4px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background: #555; | |
| } | |
| /* Animation for notifications */ | |
| @keyframes slideIn { | |
| from { transform: translateX(100%); } | |
| to { transform: translateX(0); } | |
| } | |
| .notification { | |
| animation: slideIn 0.3s ease-out; | |
| } | |
| /* Custom checkbox */ | |
| .custom-checkbox { | |
| appearance: none; | |
| -webkit-appearance: none; | |
| width: 20px; | |
| height: 20px; | |
| border: 2px solid #d1d5db; | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .custom-checkbox:checked { | |
| background-color: #3b82f6; | |
| border-color: #3b82f6; | |
| } | |
| .custom-checkbox:checked::after { | |
| content: "✓"; | |
| color: white; | |
| font-size: 12px; | |
| } | |
| /* Transition effects */ | |
| .transition-all { | |
| transition: all 0.3s ease; | |
| } | |
| /* Tooltip */ | |
| .tooltip { | |
| position: relative; | |
| } | |
| .tooltip .tooltip-text { | |
| visibility: hidden; | |
| width: 120px; | |
| background-color: #333; | |
| color: #fff; | |
| text-align: center; | |
| border-radius: 6px; | |
| padding: 5px; | |
| position: absolute; | |
| z-index: 1; | |
| bottom: 125%; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| opacity: 0; | |
| transition: opacity 0.3s; | |
| } | |
| .tooltip:hover .tooltip-text { | |
| visibility: visible; | |
| opacity: 1; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 font-sans"> | |
| <!-- Main Container --> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="hidden md:flex md:flex-shrink-0"> | |
| <div class="flex flex-col w-64 bg-indigo-700 text-white"> | |
| <div class="flex items-center justify-center h-16 px-4 border-b border-indigo-600"> | |
| <div class="flex items-center"> | |
| <i class="fas fa-users-cog text-2xl mr-2"></i> | |
| <span class="text-xl font-semibold">Team CRM</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto"> | |
| <div class="space-y-1"> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-indigo-800 text-white group"> | |
| <i class="fas fa-tachometer-alt mr-3"></i> | |
| Dashboard | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-user-friends mr-3"></i> | |
| Contacts | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-briefcase mr-3"></i> | |
| Companies | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-handshake mr-3"></i> | |
| Deals | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| Tasks | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| Calendar | |
| </a> | |
| <a href="#" class="flex items-center px-2 py-3 text-sm font-medium rounded-md hover:bg-indigo-600 hover:text-white group"> | |
| <i class="fas fa-chart-line mr-3"></i> | |
| Reports | |
| </a> | |
| </div> | |
| <div class="mt-auto mb-4"> | |
| <div class="px-2 py-3 text-sm font-medium text-indigo-200"> | |
| Team Members | |
| </div> | |
| <div class="space-y-1"> | |
| <div class="flex items-center px-2 py-2 text-sm rounded-md hover:bg-indigo-600 group"> | |
| <img class="w-6 h-6 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah"> | |
| <span>Sarah Johnson</span> | |
| </div> | |
| <div class="flex items-center px-2 py-2 text-sm rounded-md hover:bg-indigo-600 group"> | |
| <img class="w-6 h-6 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael"> | |
| <span>Michael Chen</span> | |
| </div> | |
| <div class="flex items-center px-2 py-2 text-sm rounded-md hover:bg-indigo-600 group"> | |
| <img class="w-6 h-6 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma"> | |
| <span>Emma Rodriguez</span> | |
| </div> | |
| <div class="flex items-center px-2 py-2 text-sm rounded-md hover:bg-indigo-600 group"> | |
| <img class="w-6 h-6 rounded-full mr-3" src="https://randomuser.me/api/portraits/men/75.jpg" alt="David"> | |
| <span>David Wilson</span> | |
| </div> | |
| <div class="flex items-center px-2 py-2 text-sm rounded-md hover:bg-indigo-600 group"> | |
| <img class="w-6 h-6 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/90.jpg" alt="Lisa"> | |
| <span>Lisa Brown</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex flex-col flex-1 overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <div class="flex items-center justify-between h-16 bg-white border-b border-gray-200 px-4"> | |
| <!-- Mobile menu button --> | |
| <button class="md:hidden text-gray-500 focus:outline-none" id="mobile-menu-button"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| <!-- Search bar --> | |
| <div class="flex-1 max-w-md mx-4"> | |
| <div class="relative"> | |
| <div class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none"> | |
| <i class="fas fa-search text-gray-400"></i> | |
| </div> | |
| <input class="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-md leading-5 bg-white placeholder-gray-500 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Search..." type="search"> | |
| </div> | |
| </div> | |
| <!-- Right side icons --> | |
| <div class="flex items-center space-x-4"> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <button class="p-1 rounded-full text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500"> | |
| <i class="fas fa-envelope"></i> | |
| </button> | |
| <div class="relative"> | |
| <button class="flex items-center space-x-2 focus:outline-none" id="user-menu-button"> | |
| <img class="w-8 h-8 rounded-full" src="https://randomuser.me/api/portraits/men/1.jpg" alt="User profile"> | |
| <span class="hidden md:inline text-sm font-medium text-gray-700">John Doe</span> | |
| </button> | |
| <!-- Dropdown menu --> | |
| <div class="hidden absolute right-0 mt-2 w-48 bg-white rounded-md shadow-lg py-1 z-10" id="user-menu"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Your Profile</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Sign out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Area --> | |
| <div class="flex-1 overflow-auto p-4"> | |
| <!-- Dashboard Header --> | |
| <div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-6"> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1> | |
| <p class="text-gray-600">Welcome back, John! Here's what's happening with your team today.</p> | |
| </div> | |
| <div class="mt-4 md:mt-0"> | |
| <button class="px-4 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 transition-all"> | |
| <i class="fas fa-plus mr-2"></i> Add New Contact | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Stats Cards --> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6"> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-indigo-100 text-indigo-600 mr-4"> | |
| <i class="fas fa-user-friends"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Total Contacts</p> | |
| <p class="text-2xl font-semibold text-gray-800">1,248</p> | |
| <p class="text-xs text-green-500">+12% from last month</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-blue-100 text-blue-600 mr-4"> | |
| <i class="fas fa-briefcase"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Active Deals</p> | |
| <p class="text-2xl font-semibold text-gray-800">84</p> | |
| <p class="text-xs text-green-500">+5 this week</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-green-100 text-green-600 mr-4"> | |
| <i class="fas fa-handshake"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Closed Deals</p> | |
| <p class="text-2xl font-semibold text-gray-800">32</p> | |
| <p class="text-xs text-green-500">+3 this month</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="bg-white rounded-lg shadow p-4"> | |
| <div class="flex items-center"> | |
| <div class="p-3 rounded-full bg-yellow-100 text-yellow-600 mr-4"> | |
| <i class="fas fa-tasks"></i> | |
| </div> | |
| <div> | |
| <p class="text-sm font-medium text-gray-500">Pending Tasks</p> | |
| <p class="text-2xl font-semibold text-gray-800">18</p> | |
| <p class="text-xs text-red-500">-2 from yesterday</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content Grid --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-6"> | |
| <!-- Recent Activities --> | |
| <div class="lg:col-span-2"> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-4 py-5 border-b border-gray-200 sm:px-6"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Recent Activities</h3> | |
| </div> | |
| <div class="bg-white overflow-y-auto" style="max-height: 400px;"> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/44.jpg" alt="Sarah"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Sarah Johnson</p> | |
| <p class="text-sm text-gray-500 truncate">Updated the deal with Acme Corp to "Negotiation" stage</p> | |
| </div> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| 2 hours ago | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/32.jpg" alt="Michael"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Michael Chen</p> | |
| <p class="text-sm text-gray-500 truncate">Added 5 new contacts from the Tech Conference</p> | |
| </div> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| 4 hours ago | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Emma"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Emma Rodriguez</p> | |
| <p class="text-sm text-gray-500 truncate">Closed deal with XYZ Solutions for $25,000</p> | |
| </div> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| 1 day ago | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/men/75.jpg" alt="David"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">David Wilson</p> | |
| <p class="text-sm text-gray-500 truncate">Scheduled follow-up call with TechStart Inc for tomorrow</p> | |
| </div> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| 1 day ago | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex-shrink-0"> | |
| <img class="h-8 w-8 rounded-full" src="https://randomuser.me/api/portraits/women/90.jpg" alt="Lisa"> | |
| </div> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900 truncate">Lisa Brown</p> | |
| <p class="text-sm text-gray-500 truncate">Created a new task: Prepare proposal for Global Tech</p> | |
| </div> | |
| <div class="inline-flex items-center text-sm text-gray-500"> | |
| 2 days ago | |
| </div> | |
| </div> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Upcoming Tasks --> | |
| <div> | |
| <div class="bg-white rounded-lg shadow overflow-hidden"> | |
| <div class="px-4 py-5 border-b border-gray-200 sm:px-6"> | |
| <h3 class="text-lg font-medium leading-6 text-gray-900">Upcoming Tasks</h3> | |
| </div> | |
| <div class="bg-white overflow-y-auto" style="max-height: 400px;"> | |
| <ul class="divide-y divide-gray-200"> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="custom-checkbox mt-1 mr-3"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900">Follow up with Acme Corp</p> | |
| <p class="text-xs text-gray-500">Due today at 2:00 PM</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> Assigned to you | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="custom-checkbox mt-1 mr-3"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900">Prepare quarterly report</p> | |
| <p class="text-xs text-gray-500">Due tomorrow</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> Assigned to you | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="custom-checkbox mt-1 mr-3"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900">Send proposal to TechStart</p> | |
| <p class="text-xs text-gray-500">Due in 2 days</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> Assigned to Sarah | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="custom-checkbox mt-1 mr-3"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900">Team meeting</p> | |
| <p class="text-xs text-gray-500">Recurring every Monday at 10:00 AM</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-users mr-1"></i> Team event | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </li> | |
| <li class="px-4 py-4"> | |
| <div class="flex items-start"> | |
| <input type="checkbox" class="custom-checkbox mt-1 mr-3"> | |
| <div class="flex-1 min-w-0"> | |
| <p class="text-sm font-medium text-gray-900">Review contract with XYZ</p> | |
| <p class="text-xs text-gray-500">Due in 3 days</p> | |
| <div class="mt-1 flex items-center text-xs text-gray-500"> | |
| <i class="fas fa-user mr-1"></i> Assigned to Michael | |
| </div> | |
| </div> | |
| <div class="ml-2 flex-shrink-0 flex"> | |
| <button class="text-gray-400 hover:text-gray-500 focus:outline-none"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </ | |
| <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=tusharshinde2006/crm" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |