Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>FolkCRM - Modern 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> | |
| .sidebar { | |
| transition: all 0.3s ease; | |
| } | |
| .sidebar-collapsed { | |
| width: 60px; | |
| } | |
| .sidebar-collapsed .sidebar-text { | |
| display: none; | |
| } | |
| .contact-card:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| right: 0; | |
| min-width: 200px; | |
| z-index: 1; | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .tab-active { | |
| border-bottom: 2px solid #3b82f6; | |
| color: #3b82f6; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <div class="flex h-screen overflow-hidden"> | |
| <!-- Sidebar --> | |
| <div class="sidebar bg-white border-r border-gray-200 w-64 flex-shrink-0"> | |
| <div class="flex items-center justify-between p-4 border-b border-gray-200"> | |
| <div class="flex items-center"> | |
| <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center text-white font-bold">F</div> | |
| <span class="sidebar-text ml-2 font-semibold text-gray-800">FolkCRM</span> | |
| </div> | |
| <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bars"></i> | |
| </button> | |
| </div> | |
| <div class="p-4"> | |
| <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center"> | |
| <i class="fas fa-plus mr-2 sidebar-text"></i> | |
| <span class="sidebar-text">New Contact</span> | |
| </button> | |
| </div> | |
| <nav class="mt-2"> | |
| <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Navigation</div> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50"> | |
| <i class="fas fa-users mr-3"></i> | |
| <span class="sidebar-text">Contacts</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-calendar-alt mr-3"></i> | |
| <span class="sidebar-text">Calendar</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-envelope mr-3"></i> | |
| <span class="sidebar-text">Emails</span> | |
| </a> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-tasks mr-3"></i> | |
| <span class="sidebar-text">Tasks</span> | |
| </a> | |
| <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4 sidebar-text">Workspace</div> | |
| <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-gray-600 hover:text-gray-900 hover:bg-gray-100"> | |
| <i class="fas fa-cog mr-3"></i> | |
| <span class="sidebar-text">Settings</span> | |
| </a> | |
| </nav> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="flex-1 flex flex-col overflow-hidden"> | |
| <!-- Top Navigation --> | |
| <header class="bg-white border-b border-gray-200 flex-shrink-0"> | |
| <div class="flex items-center justify-between px-6 py-3"> | |
| <div class="flex items-center"> | |
| <div class="relative"> | |
| <input type="text" placeholder="Search contacts..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-md w-64 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i> | |
| </div> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <button class="text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-bell"></i> | |
| </button> | |
| <div class="dropdown relative"> | |
| <button class="flex items-center text-gray-700 hover:text-gray-900 focus:outline-none"> | |
| <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full"> | |
| <span class="ml-2 hidden md:inline">Sarah Johnson</span> | |
| <i class="fas fa-chevron-down ml-1 text-xs"></i> | |
| </button> | |
| <div class="dropdown-content mt-2 bg-white rounded-md shadow-lg py-1 border border-gray-200"> | |
| <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">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">Log out</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="px-6 border-t border-gray-200"> | |
| <div class="flex space-x-6"> | |
| <a href="#" class="tab-active py-3 px-1 text-sm font-medium">All Contacts</a> | |
| <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Companies</a> | |
| <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Leads</a> | |
| <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Customers</a> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Main Content Area --> | |
| <main class="flex-1 overflow-y-auto p-6 bg-gray-50"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-semibold text-gray-800">All Contacts</h2> | |
| <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 hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-filter mr-2"></i> | |
| <span>Filter</span> | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50 flex items-center"> | |
| <i class="fas fa-sort mr-2"></i> | |
| <span>Sort</span> | |
| </button> | |
| <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50"> | |
| <i class="fas fa-ellipsis-h"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4"> | |
| <!-- Contact Card 1 --> | |
| <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Contact" class="w-12 h-12 rounded-full"> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-gray-900">Michael Chen</h3> | |
| <p class="text-sm text-gray-500">CEO at TechCorp</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(415) 555-1234</span> | |
| </div> | |
| <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between"> | |
| <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Customer</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Card 2 --> | |
| <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Contact" class="w-12 h-12 rounded-full"> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-gray-900">Jessica Williams</h3> | |
| <p class="text-sm text-gray-500">Marketing Director</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(212) 555-6789</span> | |
| </div> | |
| <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between"> | |
| <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Lead</span> | |
| <div class="flex space-x-2"> | |
| <button class="text-gray-400 hover:text-blue-500"> | |
| <i class="fas fa-pencil-alt"></i> | |
| </button> | |
| <button class="text-gray-400 hover:text-red-500"> | |
| <i class="fas fa-trash"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Contact Card 3 --> | |
| <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer"> | |
| <div class="flex items-center"> | |
| <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Contact" class="w-12 h-12 rounded-full"> | |
| <div class="ml-3"> | |
| <h3 class="font-medium text-gray-900">David Rodriguez</h3> | |
| <p class="text-sm text-gray-500">Sales Manager</p> | |
| </div> | |
| </div> | |
| <div class="mt-4 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-envelope mr-2"></i> | |
| <span>[email protected]</span> | |
| </div> | |
| <div class="mt-2 flex items-center text-sm text-gray-500"> | |
| <i class="fas fa-phone mr-2"></i> | |
| <span>(310) 555-4321</span> | |
| </div> | |
| <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between"> | |
| <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green- | |
| <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=raphaelmansuy/folkcrm2" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |