Hugging Face's logo

Spaces:
iiisticks
/
space1
Running

App Files Community
Cj commited on
Commit
166946d
·
verified ·
1 Parent(s): 0bb355e

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +713 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Space1
3
- emoji: 🏆
4
- colorFrom: pink
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: space1
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
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,713 @@
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>SimpleCRM - So Easy a Sales Guy Could Do It</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
+ .chat-container {
11
+ height: calc(100vh - 180px);
12
+ }
13
+ .search-results {
14
+ max-height: 300px;
15
+ overflow-y: auto;
16
+ }
17
+ .fade-in {
18
+ animation: fadeIn 0.3s ease-in-out;
19
+ }
20
+ @keyframes fadeIn {
21
+ from { opacity: 0; transform: translateY(10px); }
22
+ to { opacity: 1; transform: translateY(0); }
23
+ }
24
+ .pulse {
25
+ animation: pulse 2s infinite;
26
+ }
27
+ @keyframes pulse {
28
+ 0% { opacity: 1; }
29
+ 50% { opacity: 0.5; }
30
+ 100% { opacity: 1; }
31
+ }
32
+ .sidebar-item:hover .sidebar-badge {
33
+ background-color: #3b82f6;
34
+ color: white;
35
+ }
36
+ .file-preview {
37
+ height: 200px;
38
+ background-size: contain;
39
+ background-repeat: no-repeat;
40
+ background-position: center;
41
+ }
42
+ .integration-badge {
43
+ position: absolute;
44
+ top: -8px;
45
+ right: -8px;
46
+ background: white;
47
+ border-radius: 50%;
48
+ padding: 3px;
49
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
50
+ }
51
+ </style>
52
+ </head>
53
+ <body class="bg-gray-50 font-sans">
54
+ <div class="flex h-screen overflow-hidden">
55
+ <!-- Sidebar -->
56
+ <div class="hidden md:flex md:flex-shrink-0">
57
+ <div class="flex flex-col w-64 bg-white border-r border-gray-200">
58
+ <div class="flex items-center justify-center h-16 px-4 bg-blue-600">
59
+ <h1 class="text-white font-bold text-xl">SimpleCRM</h1>
60
+ </div>
61
+ <div class="flex flex-col flex-grow px-4 py-4 overflow-y-auto">
62
+ <div class="space-y-1">
63
+ <div class="flex items-center px-2 py-3 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
64
+ <i class="fas fa-home mr-3"></i>
65
+ Dashboard
66
+ </div>
67
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
68
+ <i class="fas fa-users mr-3"></i>
69
+ Team Updates
70
+ <span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">12</span>
71
+ </div>
72
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
73
+ <i class="fas fa-calendar-alt mr-3"></i>
74
+ Meetings
75
+ <span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">5</span>
76
+ </div>
77
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
78
+ <i class="fas fa-file-contract mr-3"></i>
79
+ Proposals
80
+ <span class="sidebar-badge ml-auto inline-block px-2 text-xs font-medium rounded-full bg-gray-200 text-gray-800">3</span>
81
+ </div>
82
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
83
+ <i class="fas fa-chart-line mr-3"></i>
84
+ Pipeline
85
+ </div>
86
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
87
+ <i class="fas fa-search mr-3"></i>
88
+ Quick Search
89
+ </div>
90
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
91
+ <i class="fas fa-file-alt mr-3"></i>
92
+ Team Templates
93
+ </div>
94
+ <div class="sidebar-item flex items-center px-2 py-3 text-sm font-medium rounded-md text-gray-600 hover:bg-gray-50">
95
+ <i class="fas fa-cog mr-3"></i>
96
+ Settings
97
+ </div>
98
+ </div>
99
+
100
+ <div class="mt-auto mb-4">
101
+ <div class="p-4 bg-blue-50 rounded-lg">
102
+ <p class="text-xs text-blue-700">Need to update your weekly report?</p>
103
+ <button class="mt-2 w-full bg-blue-600 text-white py-2 px-4 rounded-md text-sm font-medium hover:bg-blue-700">
104
+ Complete Weekly Update
105
+ </button>
106
+ </div>
107
+
108
+ <!-- Cloud Integrations -->
109
+ <div class="mt-4 p-3 bg-gray-50 rounded-lg">
110
+ <p class="text-xs font-medium text-gray-700 mb-2">Connected Clouds</p>
111
+ <div class="flex space-x-2">
112
+ <div class="relative">
113
+ <div class="h-8 w-8 bg-white rounded-full flex items-center justify-center shadow-sm">
114
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5" alt="Google Drive">
115
+ </div>
116
+ <div class="integration-badge">
117
+ <div class="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
118
+ <i class="fas fa-check text-white text-xs"></i>
119
+ </div>
120
+ </div>
121
+ </div>
122
+ <div class="relative">
123
+ <div class="h-8 w-8 bg-white rounded-full flex items-center justify-center shadow-sm">
124
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5" alt="Microsoft 365">
125
+ </div>
126
+ <div class="integration-badge">
127
+ <div class="h-4 w-4 bg-green-500 rounded-full flex items-center justify-center">
128
+ <i class="fas fa-check text-white text-xs"></i>
129
+ </div>
130
+ </div>
131
+ </div>
132
+ <button class="h-8 w-8 bg-gray-200 rounded-full flex items-center justify-center hover:bg-gray-300">
133
+ <i class="fas fa-plus text-gray-600 text-xs"></i>
134
+ </button>
135
+ </div>
136
+ </div>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ </div>
141
+
142
+ <!-- Main Content -->
143
+ <div class="flex flex-col flex-1 overflow-hidden">
144
+ <!-- Top Navigation -->
145
+ <div class="flex items-center justify-between h-16 px-4 bg-white border-b border-gray-200">
146
+ <div class="flex items-center">
147
+ <button class="md:hidden text-gray-500 mr-2">
148
+ <i class="fas fa-bars"></i>
149
+ </button>
150
+ <h2 class="text-lg font-medium text-gray-800">Team Updates</h2>
151
+ </div>
152
+
153
+ <div class="flex items-center space-x-4">
154
+ <div class="relative">
155
+ <button id="search-btn" class="p-2 text-gray-500 hover:text-gray-700">
156
+ <i class="fas fa-search"></i>
157
+ </button>
158
+ <div id="search-modal" class="hidden absolute right-0 mt-2 w-80 bg-white rounded-md shadow-lg z-10">
159
+ <div class="p-4">
160
+ <input type="text" placeholder="Ask me anything..." class="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
161
+ <div class="search-results mt-2 border-t border-gray-200">
162
+ <div class="p-3 text-sm text-gray-500">Try: "email syntax for initiative agency" or "last contact with PepsiCo"</div>
163
+ </div>
164
+ </div>
165
+ </div>
166
+ </div>
167
+
168
+ <div class="relative">
169
+ <button class="p-2 text-gray-500 hover:text-gray-700">
170
+ <i class="fas fa-bell"></i>
171
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
172
+ </button>
173
+ </div>
174
+
175
+ <div class="flex items-center">
176
+ <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
177
+ <span class="ml-2 text-sm font-medium text-gray-700 hidden md:inline">John Salesman</span>
178
+ </div>
179
+ </div>
180
+ </div>
181
+
182
+ <!-- Main Content Area -->
183
+ <div class="flex-1 overflow-auto p-4">
184
+ <div class="max-w-4xl mx-auto">
185
+ <!-- Dashboard Summary -->
186
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
187
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
188
+ <h3 class="text-sm font-medium text-gray-500">Pending Updates</h3>
189
+ <p class="mt-1 text-2xl font-semibold text-blue-600">3</p>
190
+ <p class="mt-2 text-xs text-gray-500">From your team</p>
191
+ </div>
192
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
193
+ <h3 class="text-sm font-medium text-gray-500">Active Deals</h3>
194
+ <p class="mt-1 text-2xl font-semibold text-green-600">12</p>
195
+ <p class="mt-2 text-xs text-gray-500">$1.2M potential</p>
196
+ </div>
197
+ <div class="bg-white p-4 rounded-lg shadow-sm border border-gray-200">
198
+ <h3 class="text-sm font-medium text-gray-500">Overdue Follow-ups</h3>
199
+ <p class="mt-1 text-2xl font-semibold text-red-600">2</p>
200
+ <p class="mt-2 text-xs text-gray-500">Needs attention</p>
201
+ </div>
202
+ </div>
203
+
204
+ <!-- Recent Updates -->
205
+ <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
206
+ <div class="px-4 py-3 border-b border-gray-200">
207
+ <div class="flex items-center justify-between">
208
+ <h3 class="text-sm font-medium text-gray-800">Recent Team Updates</h3>
209
+ <button id="show-files-btn" class="text-xs font-medium text-blue-600 hover:text-blue-800">
210
+ <i class="fas fa-folder-open mr-1"></i> Show Linked Files
211
+ </button>
212
+ </div>
213
+ </div>
214
+ <div class="divide-y divide-gray-200">
215
+ <!-- Update Item -->
216
+ <div class="p-4">
217
+ <div class="flex items-start">
218
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
219
+ <div class="ml-3 flex-1">
220
+ <div class="flex items-center">
221
+ <p class="text-sm font-medium text-gray-900">Sarah Dealmaker</p>
222
+ <span class="ml-auto text-xs text-gray-500">2 hours ago</span>
223
+ </div>
224
+ <p class="text-sm text-gray-700 mt-1">Had a meeting with Amazon Prime brand manager at Rufus Initiative today. Presented package, next step is email and revised package for 2Q RFP. Rates must be around $20 CPM.</p>
225
+ <div class="mt-2 flex space-x-3">
226
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Amazon</span>
227
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800">Meeting</span>
228
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-purple-100 text-purple-800">RFP</span>
229
+ </div>
230
+
231
+ <!-- Linked Files Section (Hidden by default) -->
232
+ <div id="linked-files-1" class="hidden mt-3 border-t border-gray-200 pt-3">
233
+ <p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
234
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
235
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
236
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
237
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Amazon_RFP_2023Q2.docx</p>
238
+ <div class="flex items-center mt-1">
239
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
240
+ <span class="text-xs text-gray-500">OneDrive</span>
241
+ </div>
242
+ </div>
243
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
244
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
245
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Meeting_Notes_Amazon.pdf</p>
246
+ <div class="flex items-center mt-1">
247
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
248
+ <span class="text-xs text-gray-500">Google Drive</span>
249
+ </div>
250
+ </div>
251
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
252
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337932.png')"></div>
253
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Rufus_Initiative_Deck.pptx</p>
254
+ <div class="flex items-center mt-1">
255
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
256
+ <span class="text-xs text-gray-500">Google Drive</span>
257
+ </div>
258
+ </div>
259
+ </div>
260
+ </div>
261
+ </div>
262
+ </div>
263
+ </div>
264
+
265
+ <!-- Update Item -->
266
+ <div class="p-4">
267
+ <div class="flex items-start">
268
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
269
+ <div class="ml-3 flex-1">
270
+ <div class="flex items-center">
271
+ <p class="text-sm font-medium text-gray-900">Mike Closer</p>
272
+ <span class="ml-auto text-xs text-gray-500">4 hours ago</span>
273
+ </div>
274
+ <p class="text-sm text-gray-700 mt-1">Sent final proposal to PepsiCo for their summer campaign. Decision expected by Friday. Budget is $350K, our pricing is competitive at $18 CPM.</p>
275
+ <div class="mt-2 flex space-x-3">
276
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-800">PepsiCo</span>
277
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-yellow-100 text-yellow-800">Proposal</span>
278
+ </div>
279
+
280
+ <!-- Linked Files Section (Hidden by default) -->
281
+ <div id="linked-files-2" class="hidden mt-3 border-t border-gray-200 pt-3">
282
+ <p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
283
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
284
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
285
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
286
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">PepsiCo_Summer_Campaign_Proposal.docx</p>
287
+ <div class="flex items-center mt-1">
288
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
289
+ <span class="text-xs text-gray-500">OneDrive</span>
290
+ </div>
291
+ </div>
292
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
293
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
294
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">PepsiCo_Contract_Terms.pdf</p>
295
+ <div class="flex items-center mt-1">
296
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
297
+ <span class="text-xs text-gray-500">Google Drive</span>
298
+ </div>
299
+ </div>
300
+ </div>
301
+ </div>
302
+ </div>
303
+ </div>
304
+ </div>
305
+
306
+ <!-- Update Item -->
307
+ <div class="p-4">
308
+ <div class="flex items-start">
309
+ <img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
310
+ <div class="ml-3 flex-1">
311
+ <div class="flex items-center">
312
+ <p class="text-sm font-medium text-gray-900">John Salesman</p>
313
+ <span class="ml-auto text-xs text-gray-500">Yesterday</span>
314
+ </div>
315
+ <p class="text-sm text-gray-700 mt-1">Followed up with Hyundai on Q2 media plan. They're reviewing with procurement. Shared case studies from our work with Kia.</p>
316
+ <div class="mt-2 flex space-x-3">
317
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800">Hyundai</span>
318
+ <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">Follow-up</span>
319
+ </div>
320
+ <div class="mt-3 bg-gray-50 p-3 rounded-md text-xs">
321
+ <p class="font-medium text-gray-700">SimpleCRM Assistant:</p>
322
+ <p class="mt-1 text-gray-600">When do you plan to follow up again? Would you like me to set a reminder?</p>
323
+ <button class="mt-2 text-blue-600 text-xs font-medium">Set reminder</button>
324
+ </div>
325
+
326
+ <!-- Linked Files Section (Hidden by default) -->
327
+ <div id="linked-files-3" class="hidden mt-3 border-t border-gray-200 pt-3">
328
+ <p class="text-xs font-medium text-gray-500 mb-2">AUTOMATICALLY FILED DOCUMENTS</p>
329
+ <div class="grid grid-cols-2 md:grid-cols-3 gap-2">
330
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
331
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
332
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Hyundai_Q2_Media_Plan.docx</p>
333
+ <div class="flex items-center mt-1">
334
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
335
+ <span class="text-xs text-gray-500">OneDrive</span>
336
+ </div>
337
+ </div>
338
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
339
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337946.png')"></div>
340
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Kia_Case_Study.pdf</p>
341
+ <div class="flex items-center mt-1">
342
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
343
+ <span class="text-xs text-gray-500">Google Drive</span>
344
+ </div>
345
+ </div>
346
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
347
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/337/337932.png')"></div>
348
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Procurement_Checklist.pptx</p>
349
+ <div class="flex items-center mt-1">
350
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-3 w-3 mr-1" alt="">
351
+ <span class="text-xs text-gray-500">Google Drive</span>
352
+ </div>
353
+ </div>
354
+ <div class="border border-gray-200 rounded-md p-2 hover:bg-gray-50 cursor-pointer">
355
+ <div class="file-preview bg-gray-100 rounded" style="background-image: url('https://cdn-icons-png.flaticon.com/512/136/136528.png')"></div>
356
+ <p class="text-xs font-medium text-gray-800 truncate mt-1">Follow-up_Email_Template.docx</p>
357
+ <div class="flex items-center mt-1">
358
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-3 w-3 mr-1" alt="">
359
+ <span class="text-xs text-gray-500">OneDrive</span>
360
+ </div>
361
+ </div>
362
+ </div>
363
+ </div>
364
+ </div>
365
+ </div>
366
+ </div>
367
+ </div>
368
+ </div>
369
+
370
+ <!-- Team Templates Section -->
371
+ <div class="bg-white rounded-lg shadow-sm border border-gray-200 mb-6">
372
+ <div class="px-4 py-3 border-b border-gray-200">
373
+ <h3 class="text-sm font-medium text-gray-800">Team Templates & Formatting Rules</h3>
374
+ </div>
375
+ <div class="p-4">
376
+ <div class="mb-4">
377
+ <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Document Organization</h4>
378
+ <div class="space-y-2">
379
+ <div class="flex items-start">
380
+ <div class="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
381
+ <i class="fas fa-check-circle"></i>
382
+ </div>
383
+ <p class="ml-2 text-sm text-gray-700">All client documents automatically filed under: <span class="font-medium">Clients/[Client Name]/[Year]/[Project Type]</span></p>
384
+ </div>
385
+ <div class="flex items-start">
386
+ <div class="flex-shrink-0 h-5 w-5 text-green-500 mt-0.5">
387
+ <i class="fas fa-check-circle"></i>
388
+ </div>
389
+ <p class="ml-2 text-sm text-gray-700">File naming convention: <span class="font-medium">[Client]_[Project]_[YYYYMMDD]_[Version].ext</span></p>
390
+ </div>
391
+ </div>
392
+ </div>
393
+
394
+ <div class="mb-4">
395
+ <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Standard Templates</h4>
396
+ <div class="grid grid-cols-2 md:grid-cols-4 gap-3">
397
+ <div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
398
+ <div class="h-10 w-10 bg-blue-100 rounded-full flex items-center justify-center mx-auto">
399
+ <i class="fas fa-file-word text-blue-600"></i>
400
+ </div>
401
+ <p class="text-xs font-medium text-gray-800 text-center mt-2">Proposal</p>
402
+ </div>
403
+ <div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
404
+ <div class="h-10 w-10 bg-red-100 rounded-full flex items-center justify-center mx-auto">
405
+ <i class="fas fa-file-powerpoint text-red-600"></i>
406
+ </div>
407
+ <p class="text-xs font-medium text-gray-800 text-center mt-2">Pitch Deck</p>
408
+ </div>
409
+ <div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
410
+ <div class="h-10 w-10 bg-green-100 rounded-full flex items-center justify-center mx-auto">
411
+ <i class="fas fa-file-excel text-green-600"></i>
412
+ </div>
413
+ <p class="text-xs font-medium text-gray-800 text-center mt-2">Media Plan</p>
414
+ </div>
415
+ <div class="border border-gray-200 rounded-md p-3 hover:bg-gray-50 cursor-pointer">
416
+ <div class="h-10 w-10 bg-purple-100 rounded-full flex items-center justify-center mx-auto">
417
+ <i class="fas fa-file-pdf text-purple-600"></i>
418
+ </div>
419
+ <p class="text-xs font-medium text-gray-800 text-center mt-2">Case Study</p>
420
+ </div>
421
+ </div>
422
+ </div>
423
+
424
+ <div>
425
+ <h4 class="text-xs font-medium text-gray-500 uppercase tracking-wider mb-2">Cloud Integrations</h4>
426
+ <div class="space-y-3">
427
+ <div class="flex items-center p-3 bg-gray-50 rounded-md">
428
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5 mr-3" alt="">
429
+ <div class="flex-1">
430
+ <p class="text-sm font-medium text-gray-800">Google Drive</p>
431
+ <p class="text-xs text-gray-500">Connected to team folder "Sales - Shared"</p>
432
+ </div>
433
+ <button class="text-blue-600 text-xs font-medium">Manage</button>
434
+ </div>
435
+ <div class="flex items-center p-3 bg-gray-50 rounded-md">
436
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5 mr-3" alt="">
437
+ <div class="flex-1">
438
+ <p class="text-sm font-medium text-gray-800">Microsoft 365</p>
439
+ <p class="text-xs text-gray-500">Connected to "Sales Team" SharePoint</p>
440
+ </div>
441
+ <button class="text-blue-600 text-xs font-medium">Manage</button>
442
+ </div>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+ </div>
448
+ </div>
449
+
450
+ <!-- Chat Input -->
451
+ <div class="border-t border-gray-200 bg-white p-4">
452
+ <div class="max-w-4xl mx-auto">
453
+ <div class="relative">
454
+ <textarea id="chat-input" rows="2" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none" placeholder="Type your update here... Had a meeting with [company], discussed [topic], next steps are..."></textarea>
455
+ <div class="absolute bottom-3 right-3 flex space-x-2">
456
+ <button id="attach-file-btn" class="p-1 text-gray-400 hover:text-gray-600">
457
+ <i class="fas fa-paperclip"></i>
458
+ </button>
459
+ <button id="send-btn" class="p-2 bg-blue-600 text-white rounded-full hover:bg-blue-700">
460
+ <i class="fas fa-paper-plane"></i>
461
+ </button>
462
+ </div>
463
+ </div>
464
+ <div id="assistant-prompt" class="mt-2 bg-blue-50 p-3 rounded-md text-sm hidden fade-in">
465
+ <p class="text-blue-700">I noticed you mentioned a meeting. Would you like me to:</p>
466
+ <div class="mt-2 flex space-x-2">
467
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Log meeting notes</button>
468
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Set next steps</button>
469
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">Add to calendar</button>
470
+ <button class="px-3 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-medium hover:bg-blue-200">File documents</button>
471
+ </div>
472
+ </div>
473
+
474
+ <!-- File Attachment Modal -->
475
+ <div id="file-modal" class="hidden mt-3 bg-white border border-gray-200 rounded-lg shadow-sm p-4 fade-in">
476
+ <div class="flex items-center justify-between mb-3">
477
+ <h4 class="text-sm font-medium text-gray-800">Attach Files</h4>
478
+ <button id="close-file-modal" class="text-gray-400 hover:text-gray-600">
479
+ <i class="fas fa-times"></i>
480
+ </button>
481
+ </div>
482
+ <div class="grid grid-cols-2 gap-3 mb-3">
483
+ <button class="flex items-center justify-center p-3 border border-gray-200 rounded-md hover:bg-gray-50">
484
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/a/ab/Google_Drive_icon.svg/1024px-Google_Drive_icon.svg.png" class="h-5 w-5 mr-2" alt="">
485
+ <span class="text-sm">Google Drive</span>
486
+ </button>
487
+ <button class="flex items-center justify-center p-3 border border-gray-200 rounded-md hover:bg-gray-50">
488
+ <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/5f/Microsoft_Office_logo_%282019%E2%80%93present%29.svg/1200px-Microsoft_Office_logo_%282019%E2%80%93present%29.svg.png" class="h-5 w-5 mr-2" alt="">
489
+ <span class="text-sm">OneDrive</span>
490
+ </button>
491
+ </div>
492
+ <div class="border-t border-gray-200 pt-3">
493
+ <label class="block text-sm font-medium text-gray-700 mb-1">Or upload from device</label>
494
+ <div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
495
+ <div class="space-y-1 text-center">
496
+ <div class="flex text-sm text-gray-600">
497
+ <label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
498
+ <span>Upload a file</span>
499
+ <input type="file" class="sr-only">
500
+ </label>
501
+ <p class="pl-1">or drag and drop</p>
502
+ </div>
503
+ <p class="text-xs text-gray-500">PDF, DOCX, PPTX up to 10MB</p>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+ </div>
510
+ </div>
511
+ </div>
512
+
513
+ <script>
514
+ // Toggle search modal
515
+ document.getElementById('search-btn').addEventListener('click', function() {
516
+ const modal = document.getElementById('search-modal');
517
+ modal.classList.toggle('hidden');
518
+ });
519
+
520
+ // Close search modal when clicking outside
521
+ document.addEventListener('click', function(event) {
522
+ const searchBtn = document.getElementById('search-btn');
523
+ const searchModal = document.getElementById('search-modal');
524
+
525
+ if (!searchBtn.contains(event.target) && !searchModal.contains(event.target)) {
526
+ searchModal.classList.add('hidden');
527
+ }
528
+ });
529
+
530
+ // Show assistant prompt when typing
531
+ const chatInput = document.getElementById('chat-input');
532
+ const assistantPrompt = document.getElementById('assistant-prompt');
533
+
534
+ chatInput.addEventListener('input', function() {
535
+ if (this.value.length > 10) {
536
+ assistantPrompt.classList.remove('hidden');
537
+ } else {
538
+ assistantPrompt.classList.add('hidden');
539
+ }
540
+ });
541
+
542
+ // Send message animation
543
+ document.getElementById('send-btn').addEventListener('click', function() {
544
+ if (chatInput.value.trim() !== '') {
545
+ this.innerHTML = '<i class="fas fa-circle-notch fa-spin"></i>';
546
+ this.classList.add('pulse');
547
+
548
+ // Simulate sending
549
+ setTimeout(() => {
550
+ this.innerHTML = '<i class="fas fa-check"></i>';
551
+ this.classList.remove('pulse');
552
+ chatInput.value = '';
553
+ assistantPrompt.classList.add('hidden');
554
+
555
+ // Reset after 2 seconds
556
+ setTimeout(() => {
557
+ this.innerHTML = '<i class="fas fa-paper-plane"></i>';
558
+ }, 2000);
559
+ }, 1000);
560
+ }
561
+ });
562
+
563
+ // Example of quick search functionality
564
+ const searchInput = document.querySelector('#search-modal input');
565
+ searchInput.addEventListener('keyup', function(e) {
566
+ if (e.key === 'Enter') {
567
+ const query = this.value.toLowerCase();
568
+ const resultsContainer = document.querySelector('.search-results');
569
+
570
+ // Clear previous results
571
+ resultsContainer.innerHTML = '';
572
+
573
+ // Simulate search results
574
+ if (query.includes('pepsi') || query.includes('pepsico')) {
575
+ resultsContainer.innerHTML = `
576
+ <div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
577
+ <div class="flex items-center">
578
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-red-100 flex items-center justify-center">
579
+ <i class="fas fa-copyright text-red-500"></i>
580
+ </div>
581
+ <div class="ml-4">
582
+ <p class="text-sm font-medium text-gray-900">PepsiCo</p>
583
+ <p class="text-xs text-gray-500">Last contact: Today</p>
584
+ </div>
585
+ </div>
586
+ <div class="mt-2 text-xs text-gray-700">
587
+ <p>Marketing Manager: Jessica Smith (jessica.smith@pepsico.com)</p>
588
+ <p class="mt-1">Last proposal: $350K summer campaign</p>
589
+ </div>
590
+ <div class="mt-3 pt-3 border-t border-gray-200">
591
+ <p class="text-xs font-medium text-gray-500 mb-1">LINKED DOCUMENTS</p>
592
+ <div class="flex space-x-2">
593
+ <div class="flex items-center text-xs text-gray-600">
594
+ <img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
595
+ <span>Proposal.docx</span>
596
+ </div>
597
+ <div class="flex items-center text-xs text-gray-600">
598
+ <img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" class="h-4 w-4 mr-1" alt="">
599
+ <span>Contract.pdf</span>
600
+ </div>
601
+ </div>
602
+ </div>
603
+ </div>
604
+ `;
605
+ } else if (query.includes('email') && query.includes('syntax')) {
606
+ resultsContainer.innerHTML = `
607
+ <div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
608
+ <p class="text-sm font-medium text-gray-900">Email Templates</p>
609
+ <div class="mt-2 space-y-2">
610
+ <div class="text-xs p-2 bg-gray-100 rounded">
611
+ <p class="font-medium">Initial Outreach:</p>
612
+ <p class="mt-1">Subject: Exciting opportunity with [Your Company]</p>
613
+ <p class="mt-1">Hi [First Name], I wanted to share how we've helped similar companies...</p>
614
+ <div class="mt-2 flex items-center text-gray-500">
615
+ <img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-3 w-3 mr-1" alt="">
616
+ <span class="text-xxs">Stored in: Templates/Email/Outreach.docx</span>
617
+ </div>
618
+ </div>
619
+ <div class="text-xs p-2 bg-gray-100 rounded">
620
+ <p class="font-medium">Follow-up:</p>
621
+ <p class="mt-1">Subject: Following up on our conversation</p>
622
+ <p class="mt-1">Hi [First Name], Just checking in to see if you had any questions...</p>
623
+ <div class="mt-2 flex items-center text-gray-500">
624
+ <img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-3 w-3 mr-1" alt="">
625
+ <span class="text-xxs">Stored in: Templates/Email/Follow-up.docx</span>
626
+ </div>
627
+ </div>
628
+ </div>
629
+ </div>
630
+ `;
631
+ } else if (query.includes('hyundai') || query.includes('last proposal')) {
632
+ resultsContainer.innerHTML = `
633
+ <div class="p-3 border-b border-gray-200 hover:bg-gray-50 cursor-pointer">
634
+ <div class="flex items-center">
635
+ <div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
636
+ <i class="fas fa-car text-blue-500"></i>
637
+ </div>
638
+ <div class="ml-4">
639
+ <p class="text-sm font-medium text-gray-900">Hyundai</p>
640
+ <p class="text-xs text-gray-500">Last proposal: March 15, 2023</p>
641
+ </div>
642
+ </div>
643
+ <div class="mt-2 text-xs text-gray-700">
644
+ <p>Contact: Michael Cho (michael.cho@hyundai.com)</p>
645
+ <p class="mt-1">Status: Under review with procurement</p>
646
+ </div>
647
+ <div class="mt-3 pt-3 border-t border-gray-200">
648
+ <p class="text-xs font-medium text-gray-500 mb-1">LINKED DOCUMENTS</p>
649
+ <div class="grid grid-cols-2 gap-2">
650
+ <div class="flex items-center text-xs text-gray-600">
651
+ <img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
652
+ <span>Q2_Media_Plan.docx</span>
653
+ </div>
654
+ <div class="flex items-center text-xs text-gray-600">
655
+ <img src="https://cdn-icons-png.flaticon.com/512/337/337946.png" class="h-4 w-4 mr-1" alt="">
656
+ <span>Kia_Case_Study.pdf</span>
657
+ </div>
658
+ <div class="flex items-center text-xs text-gray-600">
659
+ <img src="https://cdn-icons-png.flaticon.com/512/337/337932.png" class="h-4 w-4 mr-1" alt="">
660
+ <span>Pitch_Deck.pptx</span>
661
+ </div>
662
+ <div class="flex items-center text-xs text-gray-600">
663
+ <img src="https://cdn-icons-png.flaticon.com/512/136/136528.png" class="h-4 w-4 mr-1" alt="">
664
+ <span>Email_Thread.docx</span>
665
+ </div>
666
+ </div>
667
+ </div>
668
+ </div>
669
+ `;
670
+ } else {
671
+ resultsContainer.innerHTML = `
672
+ <div class="p-3 text-sm text-gray-500">
673
+ Try more specific queries like:
674
+ <ul class="list-disc pl-5 mt-1 space-y-1">
675
+ <li>"email syntax for initiative agency"</li>
676
+ <li>"last contact with PepsiCo"</li>
677
+ <li>"when was our last proposal to Hyundai"</li>
678
+ <li>"list our auto industry clients"</li>
679
+ <li>"show me documents for Amazon RFP"</li>
680
+ </ul>
681
+ </div>
682
+ `;
683
+ }
684
+ }
685
+ });
686
+
687
+ // Toggle linked files visibility
688
+ document.getElementById('show-files-btn').addEventListener('click', function() {
689
+ const fileSections = document.querySelectorAll('[id^="linked-files-"]');
690
+ fileSections.forEach(section => {
691
+ section.classList.toggle('hidden');
692
+ });
693
+
694
+ this.innerHTML = this.innerHTML.includes('Show') ?
695
+ '<i class="fas fa-folder mr-1"></i> Hide Linked Files' :
696
+ '<i class="fas fa-folder-open mr-1"></i> Show Linked Files';
697
+ });
698
+
699
+ // File attachment modal
700
+ const attachFileBtn = document.getElementById('attach-file-btn');
701
+ const fileModal = document.getElementById('file-modal');
702
+ const closeFileModal = document.getElementById('close-file-modal');
703
+
704
+ attachFileBtn.addEventListener('click', function() {
705
+ fileModal.classList.remove('hidden');
706
+ });
707
+
708
+ closeFileModal.addEventListener('click', function() {
709
+ fileModal.classList.add('hidden');
710
+ });
711
+ </script>
712
+ <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=Its3sticks/space1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
713
+ </html>