Hugging Face's logo

Spaces:
lpetrov
/
docgenius
Running

App Files Community
lpetrov commited on
Commit
3ee428b
·
verified ·
1 Parent(s): 7e2b228

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +495 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Docgenius
3
- emoji: 🐢
4
- colorFrom: pink
5
- colorTo: green
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: docgenius
3
+ emoji: 🐳
4
+ colorFrom: yellow
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,495 @@
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>DocGenius - Document Automation Platform</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
+ .document-preview {
14
+ min-height: 500px;
15
+ background-image: linear-gradient(to bottom, #f8fafc 1px, transparent 1px);
16
+ background-size: 100% 24px;
17
+ }
18
+ .template-card:hover {
19
+ transform: translateY(-5px);
20
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
21
+ }
22
+ .placeholder-item:hover {
23
+ background-color: #e2e8f0;
24
+ }
25
+ #dropZone {
26
+ border: 2px dashed #cbd5e0;
27
+ transition: all 0.3s ease;
28
+ }
29
+ #dropZone.drag-over {
30
+ border-color: #4299e1;
31
+ background-color: #ebf8ff;
32
+ }
33
+ </style>
34
+ </head>
35
+ <body class="bg-gray-50 font-sans">
36
+ <div class="flex h-screen overflow-hidden">
37
+ <!-- Sidebar -->
38
+ <div class="sidebar bg-white w-64 border-r border-gray-200 flex flex-col">
39
+ <div class="p-4 border-b border-gray-200">
40
+ <div class="flex items-center">
41
+ <i class="fas fa-file-alt text-blue-500 text-2xl mr-3"></i>
42
+ <h1 class="text-xl font-bold text-gray-800">DocGenius</h1>
43
+ </div>
44
+ </div>
45
+ <div class="flex-1 overflow-y-auto">
46
+ <nav class="p-4">
47
+ <div class="mb-6">
48
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Dashboard</h2>
49
+ <ul>
50
+ <li class="mb-2">
51
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md bg-blue-50 text-blue-700">
52
+ <i class="fas fa-home mr-3 text-blue-500"></i>
53
+ Overview
54
+ </a>
55
+ </li>
56
+ <li class="mb-2">
57
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
58
+ <i class="fas fa-chart-line mr-3 text-gray-500"></i>
59
+ Analytics
60
+ </a>
61
+ </li>
62
+ </ul>
63
+ </div>
64
+ <div class="mb-6">
65
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Documents</h2>
66
+ <ul>
67
+ <li class="mb-2">
68
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
69
+ <i class="fas fa-file-word mr-3 text-blue-400"></i>
70
+ Templates
71
+ </a>
72
+ </li>
73
+ <li class="mb-2">
74
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
75
+ <i class="fas fa-file-export mr-3 text-green-400"></i>
76
+ Generated Files
77
+ </a>
78
+ </li>
79
+ <li class="mb-2">
80
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
81
+ <i class="fas fa-database mr-3 text-purple-400"></i>
82
+ Data Sources
83
+ </a>
84
+ </li>
85
+ </ul>
86
+ </div>
87
+ <div>
88
+ <h2 class="text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3">Settings</h2>
89
+ <ul>
90
+ <li class="mb-2">
91
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
92
+ <i class="fas fa-user-cog mr-3 text-gray-500"></i>
93
+ Account
94
+ </a>
95
+ </li>
96
+ <li class="mb-2">
97
+ <a href="#" class="flex items-center px-3 py-2 text-sm font-medium rounded-md text-gray-700 hover:bg-gray-100">
98
+ <i class="fas fa-shield-alt mr-3 text-gray-500"></i>
99
+ Security
100
+ </a>
101
+ </li>
102
+ </ul>
103
+ </div>
104
+ </nav>
105
+ </div>
106
+ <div class="p-4 border-t border-gray-200">
107
+ <div class="flex items-center">
108
+ <img class="w-8 h-8 rounded-full mr-3" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User avatar">
109
+ <div>
110
+ <p class="text-sm font-medium text-gray-700">Sarah Johnson</p>
111
+ <p class="text-xs text-gray-500">Admin</p>
112
+ </div>
113
+ </div>
114
+ </div>
115
+ </div>
116
+
117
+ <!-- Main Content -->
118
+ <div class="flex-1 flex flex-col overflow-hidden">
119
+ <!-- Top Navigation -->
120
+ <header class="bg-white border-b border-gray-200">
121
+ <div class="flex items-center justify-between px-6 py-4">
122
+ <div class="flex items-center">
123
+ <button class="text-gray-500 focus:outline-none mr-4">
124
+ <i class="fas fa-bars"></i>
125
+ </button>
126
+ <div class="relative">
127
+ <input type="text" placeholder="Search templates..." class="pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 w-64">
128
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
129
+ </div>
130
+ </div>
131
+ <div class="flex items-center space-x-4">
132
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
133
+ <i class="fas fa-bell"></i>
134
+ </button>
135
+ <button class="text-gray-500 hover:text-gray-700 focus:outline-none">
136
+ <i class="fas fa-question-circle"></i>
137
+ </button>
138
+ </div>
139
+ </div>
140
+ </header>
141
+
142
+ <!-- Content Area -->
143
+ <main class="flex-1 overflow-y-auto p-6 bg-gray-50">
144
+ <div class="mb-6 flex justify-between items-center">
145
+ <div>
146
+ <h2 class="text-2xl font-bold text-gray-800">Document Automation</h2>
147
+ <p class="text-gray-600">Create, manage, and automate your document workflows</p>
148
+ </div>
149
+ <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center">
150
+ <i class="fas fa-plus mr-2"></i> New Template
151
+ </button>
152
+ </div>
153
+
154
+ <!-- Template Cards -->
155
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 mb-8">
156
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
157
+ <div class="p-4 border-b border-gray-200 bg-blue-50">
158
+ <div class="flex justify-between items-center">
159
+ <h3 class="font-medium text-blue-800">Business Proposal</h3>
160
+ <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded-full">Active</span>
161
+ </div>
162
+ </div>
163
+ <div class="p-4">
164
+ <p class="text-gray-600 text-sm mb-4">Standard business proposal template with company branding and dynamic sections.</p>
165
+ <div class="flex justify-between items-center text-sm">
166
+ <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 2 days ago</span>
167
+ <button class="text-blue-600 hover:text-blue-800">Edit</button>
168
+ </div>
169
+ </div>
170
+ </div>
171
+
172
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
173
+ <div class="p-4 border-b border-gray-200 bg-green-50">
174
+ <div class="flex justify-between items-center">
175
+ <h3 class="font-medium text-green-800">Monthly Report</h3>
176
+ <span class="bg-green-100 text-green-800 text-xs px-2 py-1 rounded-full">Active</span>
177
+ </div>
178
+ </div>
179
+ <div class="p-4">
180
+ <p class="text-gray-600 text-sm mb-4">Automated monthly performance report with charts and data visualization.</p>
181
+ <div class="flex justify-between items-center text-sm">
182
+ <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 1 week ago</span>
183
+ <button class="text-blue-600 hover:text-blue-800">Edit</button>
184
+ </div>
185
+ </div>
186
+ </div>
187
+
188
+ <div class="template-card bg-white rounded-lg shadow-md overflow-hidden transition-all duration-300">
189
+ <div class="p-4 border-b border-gray-200 bg-purple-50">
190
+ <div class="flex justify-between items-center">
191
+ <h3 class="font-medium text-purple-800">Service Contract</h3>
192
+ <span class="bg-purple-100 text-purple-800 text-xs px-2 py-1 rounded-full">Draft</span>
193
+ </div>
194
+ </div>
195
+ <div class="p-4">
196
+ <p class="text-gray-600 text-sm mb-4">Legal service agreement template with customizable terms and conditions.</p>
197
+ <div class="flex justify-between items-center text-sm">
198
+ <span class="text-gray-500"><i class="fas fa-calendar-alt mr-1"></i> Updated 3 weeks ago</span>
199
+ <button class="text-blue-600 hover:text-blue-800">Edit</button>
200
+ </div>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <!-- Document Editor -->
206
+ <div class="bg-white rounded-lg shadow-md overflow-hidden mb-8">
207
+ <div class="border-b border-gray-200">
208
+ <div class="flex justify-between items-center px-6 py-3 bg-gray-50">
209
+ <h3 class="font-medium text-gray-800">Business Proposal Template</h3>
210
+ <div class="flex space-x-2">
211
+ <button class="px-3 py-1 bg-gray-200 text-gray-700 rounded text-sm hover:bg-gray-300">Save Draft</button>
212
+ <button class="px-3 py-1 bg-blue-600 text-white rounded text-sm hover:bg-blue-700">Publish</button>
213
+ </div>
214
+ </div>
215
+ <div class="flex border-b border-gray-200">
216
+ <button class="px-4 py-2 text-sm font-medium border-b-2 border-blue-500 text-blue-600">Design</button>
217
+ <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Data Mapping</button>
218
+ <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Settings</button>
219
+ <button class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Preview</button>
220
+ </div>
221
+ </div>
222
+ <div class="p-6">
223
+ <div class="flex">
224
+ <!-- Left Panel - Components -->
225
+ <div class="w-64 pr-6">
226
+ <div class="mb-6">
227
+ <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Components</h4>
228
+ <div class="space-y-2">
229
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
230
+ <i class="fas fa-heading mr-2 text-blue-500"></i> Heading
231
+ </button>
232
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
233
+ <i class="fas fa-paragraph mr-2 text-green-500"></i> Paragraph
234
+ </button>
235
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
236
+ <i class="fas fa-list-ol mr-2 text-purple-500"></i> Numbered List
237
+ </button>
238
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
239
+ <i class="fas fa-list-ul mr-2 text-yellow-500"></i> Bullet List
240
+ </button>
241
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
242
+ <i class="fas fa-table mr-2 text-red-500"></i> Table
243
+ </button>
244
+ <button class="w-full flex items-center px-3 py-2 text-sm rounded-md bg-gray-100 text-gray-700">
245
+ <i class="fas fa-image mr-2 text-indigo-500"></i> Image
246
+ </button>
247
+ </div>
248
+ </div>
249
+ <div>
250
+ <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Placeholders</h4>
251
+ <div class="space-y-2">
252
+ <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center">
253
+ <span><i class="fas fa-user-tie mr-2 text-blue-400"></i> Client Name</span>
254
+ <i class="fas fa-grip-vertical text-gray-400"></i>
255
+ </div>
256
+ <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center">
257
+ <span><i class="fas fa-building mr-2 text-green-400"></i> Company Name</span>
258
+ <i class="fas fa-grip-vertical text-gray-400"></i>
259
+ </div>
260
+ <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center">
261
+ <span><i class="fas fa-calendar-day mr-2 text-purple-400"></i> Date</span>
262
+ <i class="fas fa-grip-vertical text-gray-400"></i>
263
+ </div>
264
+ <div class="placeholder-item px-3 py-2 text-sm rounded-md border border-gray-200 cursor-move flex justify-between items-center">
265
+ <span><i class="fas fa-dollar-sign mr-2 text-yellow-400"></i> Total Amount</span>
266
+ <i class="fas fa-grip-vertical text-gray-400"></i>
267
+ </div>
268
+ </div>
269
+ </div>
270
+ </div>
271
+
272
+ <!-- Center Panel - Document Preview -->
273
+ <div class="flex-1 border-l border-r border-gray-200 px-6">
274
+ <div class="document-preview bg-white p-8 rounded border border-gray-200">
275
+ <div class="mb-8 text-center">
276
+ <h1 class="text-3xl font-bold text-gray-800 mb-2">Business Proposal</h1>
277
+ <p class="text-gray-600">Prepared for: <span class="border-b border-dashed border-gray-400 px-1">[Client Name]</span></p>
278
+ </div>
279
+
280
+ <div class="mb-8">
281
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Executive Summary</h2>
282
+ <p class="text-gray-700 mb-4">This proposal outlines the services to be provided by <span class="bg-blue-100 px-1 rounded">[Company Name]</span> to address your specific business needs. Our team has carefully analyzed your requirements and developed this comprehensive solution.</p>
283
+ </div>
284
+
285
+ <div class="mb-8">
286
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Project Details</h2>
287
+ <div class="mb-4">
288
+ <h3 class="font-medium text-gray-800 mb-2">Scope of Work</h3>
289
+ <ul class="list-disc pl-6 text-gray-700 space-y-1">
290
+ <li>Initial consultation and needs assessment</li>
291
+ <li>Custom solution development</li>
292
+ <li>Implementation and deployment</li>
293
+ <li>Ongoing support and maintenance</li>
294
+ </ul>
295
+ </div>
296
+ </div>
297
+
298
+ <div class="mb-8">
299
+ <h2 class="text-xl font-semibold text-gray-800 mb-4 border-b pb-2">Pricing</h2>
300
+ <table class="w-full border-collapse">
301
+ <thead>
302
+ <tr class="bg-gray-100">
303
+ <th class="text-left p-3 border">Service</th>
304
+ <th class="text-left p-3 border">Description</th>
305
+ <th class="text-left p-3 border">Price</th>
306
+ </tr>
307
+ </thead>
308
+ <tbody>
309
+ <tr>
310
+ <td class="p-3 border">Consultation</td>
311
+ <td class="p-3 border">Initial assessment</td>
312
+ <td class="p-3 border">$500</td>
313
+ </tr>
314
+ <tr class="bg-gray-50">
315
+ <td class="p-3 border">Development</td>
316
+ <td class="p-3 border">Custom solution</td>
317
+ <td class="p-3 border">$5,000</td>
318
+ </tr>
319
+ <tr>
320
+ <td class="p-3 border">Support</td>
321
+ <td class="p-3 border">Monthly maintenance</td>
322
+ <td class="p-3 border">$1,000/mo</td>
323
+ </tr>
324
+ <tr class="bg-gray-100 font-medium">
325
+ <td class="p-3 border" colspan="2">Total</td>
326
+ <td class="p-3 border">$6,500</td>
327
+ </tr>
328
+ </tbody>
329
+ </table>
330
+ </div>
331
+
332
+ <div class="text-sm text-gray-600">
333
+ <p>Proposal valid until: <span class="border-b border-dashed border-gray-400 px-1">[Date]</span></p>
334
+ </div>
335
+ </div>
336
+ </div>
337
+
338
+ <!-- Right Panel - Properties -->
339
+ <div class="w-64 pl-6">
340
+ <div class="mb-6">
341
+ <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Properties</h4>
342
+ <div class="space-y-4">
343
+ <div>
344
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Family</label>
345
+ <select class="w-full border border-gray-300 rounded-md px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
346
+ <option>Roboto</option>
347
+ <option>Open Sans</option>
348
+ <option>Montserrat</option>
349
+ <option>Lato</option>
350
+ </select>
351
+ </div>
352
+ <div>
353
+ <label class="block text-sm font-medium text-gray-700 mb-1">Font Size</label>
354
+ <input type="range" class="w-full" min="10" max="24" value="14">
355
+ </div>
356
+ <div>
357
+ <label class="block text-sm font-medium text-gray-700 mb-1">Line Height</label>
358
+ <input type="range" class="w-full" min="1" max="2" step="0.1" value="1.5">
359
+ </div>
360
+ </div>
361
+ </div>
362
+ <div>
363
+ <h4 class="text-sm font-semibold text-gray-500 uppercase tracking-wider mb-3">Data Source</h4>
364
+ <div id="dropZone" class="p-4 rounded-lg text-center mb-4">
365
+ <i class="fas fa-cloud-upload-alt text-3xl text-gray-400 mb-2"></i>
366
+ <p class="text-sm text-gray-500">Drag & drop CSV or Excel file here</p>
367
+ <p class="text-xs text-gray-400 mt-1">or</p>
368
+ <button class="mt-2 text-sm text-blue-600 hover:text-blue-800">Browse Files</button>
369
+ </div>
370
+ <div class="text-xs text-gray-500">
371
+ <p>Connected to: <span class="font-medium">CRM System</span></p>
372
+ <button class="mt-2 text-xs text-blue-600 hover:text-blue-800">Change Connection</button>
373
+ </div>
374
+ </div>
375
+ </div>
376
+ </div>
377
+ </div>
378
+ </div>
379
+
380
+ <!-- Recent Activity -->
381
+ <div class="bg-white rounded-lg shadow-md overflow-hidden">
382
+ <div class="border-b border-gray-200 px-6 py-3 bg-gray-50">
383
+ <h3 class="font-medium text-gray-800">Recent Activity</h3>
384
+ </div>
385
+ <div class="p-6">
386
+ <div class="space-y-4">
387
+ <div class="flex">
388
+ <div class="flex-shrink-0 mr-4">
389
+ <div class="h-10 w-10 rounded-full bg-blue-100 flex items-center justify-center">
390
+ <i class="fas fa-file-export text-blue-500"></i>
391
+ </div>
392
+ </div>
393
+ <div class="flex-1">
394
+ <p class="text-sm font-medium text-gray-800">Generated 25 proposals</p>
395
+ <p class="text-sm text-gray-500">2 hours ago</p>
396
+ </div>
397
+ <button class="text-blue-600 hover:text-blue-800 text-sm">View</button>
398
+ </div>
399
+ <div class="flex">
400
+ <div class="flex-shrink-0 mr-4">
401
+ <div class="h-10 w-10 rounded-full bg-green-100 flex items-center justify-center">
402
+ <i class="fas fa-edit text-green-500"></i>
403
+ </div>
404
+ </div>
405
+ <div class="flex-1">
406
+ <p class="text-sm font-medium text-gray-800">Updated contract template</p>
407
+ <p class="text-sm text-gray-500">Yesterday</p>
408
+ </div>
409
+ <button class="text-blue-600 hover:text-blue-800 text-sm">View</button>
410
+ </div>
411
+ <div class="flex">
412
+ <div class="flex-shrink-0 mr-4">
413
+ <div class="h-10 w-10 rounded-full bg-purple-100 flex items-center justify-center">
414
+ <i class="fas fa-link text-purple-500"></i>
415
+ </div>
416
+ </div>
417
+ <div class="flex-1">
418
+ <p class="text-sm font-medium text-gray-800">Connected to Salesforce</p>
419
+ <p class="text-sm text-gray-500">3 days ago</p>
420
+ </div>
421
+ <button class="text-blue-600 hover:text-blue-800 text-sm">View</button>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </main>
427
+ </div>
428
+ </div>
429
+
430
+ <script>
431
+ // Drag and drop functionality for data sources
432
+ const dropZone = document.getElementById('dropZone');
433
+
434
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
435
+ dropZone.addEventListener(eventName, preventDefaults, false);
436
+ });
437
+
438
+ function preventDefaults(e) {
439
+ e.preventDefault();
440
+ e.stopPropagation();
441
+ }
442
+
443
+ ['dragenter', 'dragover'].forEach(eventName => {
444
+ dropZone.addEventListener(eventName, highlight, false);
445
+ });
446
+
447
+ ['dragleave', 'drop'].forEach(eventName => {
448
+ dropZone.addEventListener(eventName, unhighlight, false);
449
+ });
450
+
451
+ function highlight() {
452
+ dropZone.classList.add('drag-over');
453
+ }
454
+
455
+ function unhighlight() {
456
+ dropZone.classList.remove('drag-over');
457
+ }
458
+
459
+ dropZone.addEventListener('drop', handleDrop, false);
460
+
461
+ function handleDrop(e) {
462
+ const dt = e.dataTransfer;
463
+ const files = dt.files;
464
+ handleFiles(files);
465
+ }
466
+
467
+ function handleFiles(files) {
468
+ alert(`File ${files[0].name} ready for processing`);
469
+ // Here you would typically process the file (CSV, Excel, etc.)
470
+ }
471
+
472
+ // Template card hover effect
473
+ document.querySelectorAll('.template-card').forEach(card => {
474
+ card.addEventListener('mouseenter', () => {
475
+ card.style.transform = 'translateY(-5px)';
476
+ card.style.boxShadow = '0 10px 25px -5px rgba(0, 0, 0, 0.1)';
477
+ });
478
+ card.addEventListener('mouseleave', () => {
479
+ card.style.transform = '';
480
+ card.style.boxShadow = '';
481
+ });
482
+ });
483
+
484
+ // Placeholder item hover effect
485
+ document.querySelectorAll('.placeholder-item').forEach(item => {
486
+ item.addEventListener('mouseenter', () => {
487
+ item.style.backgroundColor = '#e2e8f0';
488
+ });
489
+ item.addEventListener('mouseleave', () => {
490
+ item.style.backgroundColor = '';
491
+ });
492
+ });
493
+ </script>
494
+ <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=lpetrov/docgenius" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
495
+ </html>