Hugging Face's logo

Spaces:
raphaelmansuy
/
folkcrm2
Running

App Files Community
raphaelmansuy commited on
Commit
e50aa98
·
verified ·
1 Parent(s): 444d79f

Write a SaaS CRM application that looks like folk.app - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +223 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Folkcrm2
3
- emoji: 🌍
4
- colorFrom: blue
5
- colorTo: blue
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: folkcrm2
3
+ emoji: 🐳
4
+ colorFrom: pink
5
+ colorTo: gray
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,223 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>FolkCRM - Modern Relationship Management</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
9
+ <style>
10
+ .sidebar {
11
+ transition: all 0.3s ease;
12
+ }
13
+ .sidebar-collapsed {
14
+ width: 60px;
15
+ }
16
+ .sidebar-collapsed .sidebar-text {
17
+ display: none;
18
+ }
19
+ .contact-card:hover {
20
+ transform: translateY(-2px);
21
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
22
+ }
23
+ .dropdown-content {
24
+ display: none;
25
+ position: absolute;
26
+ right: 0;
27
+ min-width: 200px;
28
+ z-index: 1;
29
+ }
30
+ .dropdown:hover .dropdown-content {
31
+ display: block;
32
+ }
33
+ .tab-active {
34
+ border-bottom: 2px solid #3b82f6;
35
+ color: #3b82f6;
36
+ }
37
+ </style>
38
+ </head>
39
+ <body class="bg-gray-50 font-sans">
40
+ <div class="flex h-screen overflow-hidden">
41
+ <!-- Sidebar -->
42
+ <div class="sidebar bg-white border-r border-gray-200 w-64 flex-shrink-0">
43
+ <div class="flex items-center justify-between p-4 border-b border-gray-200">
44
+ <div class="flex items-center">
45
+ <div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center text-white font-bold">F</div>
46
+ <span class="sidebar-text ml-2 font-semibold text-gray-800">FolkCRM</span>
47
+ </div>
48
+ <button id="sidebar-toggle" class="text-gray-500 hover:text-gray-700">
49
+ <i class="fas fa-bars"></i>
50
+ </button>
51
+ </div>
52
+ <div class="p-4">
53
+ <button class="w-full bg-blue-500 hover:bg-blue-600 text-white py-2 px-4 rounded-md flex items-center justify-center">
54
+ <i class="fas fa-plus mr-2 sidebar-text"></i>
55
+ <span class="sidebar-text">New Contact</span>
56
+ </button>
57
+ </div>
58
+ <nav class="mt-2">
59
+ <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider sidebar-text">Navigation</div>
60
+ <a href="#" class="flex items-center px-4 py-2 text-sm font-medium text-blue-600 bg-blue-50">
61
+ <i class="fas fa-users mr-3"></i>
62
+ <span class="sidebar-text">Contacts</span>
63
+ </a>
64
+ <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">
65
+ <i class="fas fa-calendar-alt mr-3"></i>
66
+ <span class="sidebar-text">Calendar</span>
67
+ </a>
68
+ <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">
69
+ <i class="fas fa-envelope mr-3"></i>
70
+ <span class="sidebar-text">Emails</span>
71
+ </a>
72
+ <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">
73
+ <i class="fas fa-tasks mr-3"></i>
74
+ <span class="sidebar-text">Tasks</span>
75
+ </a>
76
+ <div class="px-4 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mt-4 sidebar-text">Workspace</div>
77
+ <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">
78
+ <i class="fas fa-cog mr-3"></i>
79
+ <span class="sidebar-text">Settings</span>
80
+ </a>
81
+ </nav>
82
+ </div>
83
+
84
+ <!-- Main Content -->
85
+ <div class="flex-1 flex flex-col overflow-hidden">
86
+ <!-- Top Navigation -->
87
+ <header class="bg-white border-b border-gray-200 flex-shrink-0">
88
+ <div class="flex items-center justify-between px-6 py-3">
89
+ <div class="flex items-center">
90
+ <div class="relative">
91
+ <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">
92
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
93
+ </div>
94
+ </div>
95
+ <div class="flex items-center space-x-4">
96
+ <button class="text-gray-500 hover:text-gray-700">
97
+ <i class="fas fa-bell"></i>
98
+ </button>
99
+ <div class="dropdown relative">
100
+ <button class="flex items-center text-gray-700 hover:text-gray-900 focus:outline-none">
101
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="User" class="w-8 h-8 rounded-full">
102
+ <span class="ml-2 hidden md:inline">Sarah Johnson</span>
103
+ <i class="fas fa-chevron-down ml-1 text-xs"></i>
104
+ </button>
105
+ <div class="dropdown-content mt-2 bg-white rounded-md shadow-lg py-1 border border-gray-200">
106
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Profile</a>
107
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Settings</a>
108
+ <a href="#" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">Log out</a>
109
+ </div>
110
+ </div>
111
+ </div>
112
+ </div>
113
+ <div class="px-6 border-t border-gray-200">
114
+ <div class="flex space-x-6">
115
+ <a href="#" class="tab-active py-3 px-1 text-sm font-medium">All Contacts</a>
116
+ <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Companies</a>
117
+ <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Leads</a>
118
+ <a href="#" class="py-3 px-1 text-sm font-medium text-gray-500 hover:text-gray-700">Customers</a>
119
+ </div>
120
+ </div>
121
+ </header>
122
+
123
+ <!-- Main Content Area -->
124
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
125
+ <div class="flex justify-between items-center mb-6">
126
+ <h2 class="text-2xl font-semibold text-gray-800">All Contacts</h2>
127
+ <div class="flex space-x-2">
128
+ <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">
129
+ <i class="fas fa-filter mr-2"></i>
130
+ <span>Filter</span>
131
+ </button>
132
+ <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">
133
+ <i class="fas fa-sort mr-2"></i>
134
+ <span>Sort</span>
135
+ </button>
136
+ <button class="px-3 py-1 border border-gray-300 rounded-md text-sm font-medium text-gray-700 hover:bg-gray-50">
137
+ <i class="fas fa-ellipsis-h"></i>
138
+ </button>
139
+ </div>
140
+ </div>
141
+
142
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
143
+ <!-- Contact Card 1 -->
144
+ <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer">
145
+ <div class="flex items-center">
146
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="Contact" class="w-12 h-12 rounded-full">
147
+ <div class="ml-3">
148
+ <h3 class="font-medium text-gray-900">Michael Chen</h3>
149
+ <p class="text-sm text-gray-500">CEO at TechCorp</p>
150
+ </div>
151
+ </div>
152
+ <div class="mt-4 flex items-center text-sm text-gray-500">
153
+ <i class="fas fa-envelope mr-2"></i>
154
+ <span>[email protected]</span>
155
+ </div>
156
+ <div class="mt-2 flex items-center text-sm text-gray-500">
157
+ <i class="fas fa-phone mr-2"></i>
158
+ <span>(415) 555-1234</span>
159
+ </div>
160
+ <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between">
161
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">Customer</span>
162
+ <div class="flex space-x-2">
163
+ <button class="text-gray-400 hover:text-blue-500">
164
+ <i class="fas fa-pencil-alt"></i>
165
+ </button>
166
+ <button class="text-gray-400 hover:text-red-500">
167
+ <i class="fas fa-trash"></i>
168
+ </button>
169
+ </div>
170
+ </div>
171
+ </div>
172
+
173
+ <!-- Contact Card 2 -->
174
+ <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer">
175
+ <div class="flex items-center">
176
+ <img src="https://randomuser.me/api/portraits/women/63.jpg" alt="Contact" class="w-12 h-12 rounded-full">
177
+ <div class="ml-3">
178
+ <h3 class="font-medium text-gray-900">Jessica Williams</h3>
179
+ <p class="text-sm text-gray-500">Marketing Director</p>
180
+ </div>
181
+ </div>
182
+ <div class="mt-4 flex items-center text-sm text-gray-500">
183
+ <i class="fas fa-envelope mr-2"></i>
184
+ <span>[email protected]</span>
185
+ </div>
186
+ <div class="mt-2 flex items-center text-sm text-gray-500">
187
+ <i class="fas fa-phone mr-2"></i>
188
+ <span>(212) 555-6789</span>
189
+ </div>
190
+ <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between">
191
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">Lead</span>
192
+ <div class="flex space-x-2">
193
+ <button class="text-gray-400 hover:text-blue-500">
194
+ <i class="fas fa-pencil-alt"></i>
195
+ </button>
196
+ <button class="text-gray-400 hover:text-red-500">
197
+ <i class="fas fa-trash"></i>
198
+ </button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+
203
+ <!-- Contact Card 3 -->
204
+ <div class="contact-card bg-white rounded-lg shadow-sm border border-gray-200 p-4 transition duration-150 ease-in-out cursor-pointer">
205
+ <div class="flex items-center">
206
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Contact" class="w-12 h-12 rounded-full">
207
+ <div class="ml-3">
208
+ <h3 class="font-medium text-gray-900">David Rodriguez</h3>
209
+ <p class="text-sm text-gray-500">Sales Manager</p>
210
+ </div>
211
+ </div>
212
+ <div class="mt-4 flex items-center text-sm text-gray-500">
213
+ <i class="fas fa-envelope mr-2"></i>
214
+ <span>[email protected]</span>
215
+ </div>
216
+ <div class="mt-2 flex items-center text-sm text-gray-500">
217
+ <i class="fas fa-phone mr-2"></i>
218
+ <span>(310) 555-4321</span>
219
+ </div>
220
+ <div class="mt-4 pt-2 border-t border-gray-100 flex justify-between">
221
+ <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-green-
222
+ <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>
223
+ </html>