Spaces:
Running
Running
File size: 13,844 Bytes
e50aa98 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 |
<!DOCTYPE html>
<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> |