LucianoM39 commited on
Commit
bbff742
·
verified ·
1 Parent(s): 5d02411

Add 3 files

Browse files
Files changed (3) hide show
  1. README.md +7 -5
  2. index.html +922 -19
  3. prompts.txt +3 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Https Huggingface Co Lucianom39
3
- emoji: 🐨
4
- colorFrom: gray
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: https-huggingface-co-lucianom39
3
+ emoji: 🐳
4
+ colorFrom: blue
5
+ colorTo: red
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,922 @@
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>UWPRK Freelance Manager Pro</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
+ .gradient-bg {
11
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
12
+ }
13
+ .project-card:hover {
14
+ transform: translateY(-5px);
15
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
16
+ }
17
+ .sidebar {
18
+ transition: all 0.3s ease;
19
+ }
20
+ .sidebar.collapsed {
21
+ width: 80px;
22
+ }
23
+ .sidebar.collapsed .sidebar-text {
24
+ display: none;
25
+ }
26
+ .chart-container {
27
+ position: relative;
28
+ height: 300px;
29
+ width: 100%;
30
+ }
31
+ .animate-pulse {
32
+ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
33
+ }
34
+ @keyframes pulse {
35
+ 0%, 100% {
36
+ opacity: 1;
37
+ }
38
+ 50% {
39
+ opacity: 0.5;
40
+ }
41
+ }
42
+ .connection-status {
43
+ width: 10px;
44
+ height: 10px;
45
+ border-radius: 50%;
46
+ display: inline-block;
47
+ margin-right: 6px;
48
+ }
49
+ .connected {
50
+ background-color: #10B981;
51
+ }
52
+ .disconnected {
53
+ background-color: #EF4444;
54
+ }
55
+ .message-unread {
56
+ background-color: #EFF6FF;
57
+ }
58
+ .job-match-score {
59
+ position: absolute;
60
+ right: 1rem;
61
+ top: 1rem;
62
+ width: 40px;
63
+ height: 40px;
64
+ border-radius: 50%;
65
+ display: flex;
66
+ align-items: center;
67
+ justify-content: center;
68
+ font-weight: bold;
69
+ }
70
+ .match-high {
71
+ background-color: #D1FAE5;
72
+ color: #065F46;
73
+ }
74
+ .match-medium {
75
+ background-color: #FEF3C7;
76
+ color: #92400E;
77
+ }
78
+ .tag {
79
+ display: inline-block;
80
+ padding: 0.25rem 0.5rem;
81
+ border-radius: 9999px;
82
+ font-size: 0.75rem;
83
+ font-weight: 500;
84
+ }
85
+ .ai-assistant {
86
+ border-left: 4px solid #8B5CF6;
87
+ }
88
+ </style>
89
+ </head>
90
+ <body class="bg-gray-50 font-sans">
91
+ <div class="flex h-screen overflow-hidden">
92
+ <!-- Sidebar -->
93
+ <div class="sidebar bg-indigo-800 text-white w-64 flex-shrink-0 flex flex-col">
94
+ <div class="p-4 flex items-center justify-between border-b border-indigo-700">
95
+ <div class="flex items-center">
96
+ <i class="fas fa-rocket text-2xl mr-3"></i>
97
+ <span class="sidebar-text text-xl font-bold">UWPRK Pro</span>
98
+ </div>
99
+ <button id="toggleSidebar" class="text-white focus:outline-none">
100
+ <i class="fas fa-bars"></i>
101
+ </button>
102
+ </div>
103
+ <div class="flex-1 overflow-y-auto">
104
+ <nav class="p-4">
105
+ <div class="mb-8">
106
+ <p class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-4">Navigation</p>
107
+ <ul>
108
+ <li class="mb-2">
109
+ <a href="#" class="flex items-center p-2 rounded-lg bg-indigo-700">
110
+ <i class="fas fa-home mr-3"></i>
111
+ <span class="sidebar-text">Dashboard</span>
112
+ </a>
113
+ </li>
114
+ <li class="mb-2">
115
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
116
+ <i class="fas fa-briefcase mr-3"></i>
117
+ <span class="sidebar-text">Projects</span>
118
+ </a>
119
+ </li>
120
+ <li class="mb-2">
121
+ <a href="#jobs-section" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
122
+ <i class="fas fa-search-dollar mr-3"></i>
123
+ <span class="sidebar-text">Job Finder</span>
124
+ </a>
125
+ </li>
126
+ <li class="mb-2">
127
+ <a href="#messages-section" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
128
+ <i class="fas fa-comments mr-3"></i>
129
+ <span class="sidebar-text">Messages</span>
130
+ <span class="ml-auto bg-red-500 text-white text-xs px-2 py-1 rounded-full">3</span>
131
+ </a>
132
+ </li>
133
+ <li class="mb-2">
134
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
135
+ <i class="fas fa-clock mr-3"></i>
136
+ <span class="sidebar-text">Time Tracking</span>
137
+ </a>
138
+ </li>
139
+ <li class="mb-2">
140
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
141
+ <i class="fas fa-file-invoice-dollar mr-3"></i>
142
+ <span class="sidebar-text">Invoices</span>
143
+ </a>
144
+ </li>
145
+ </ul>
146
+ </div>
147
+ <div>
148
+ <p class="sidebar-text uppercase text-xs font-semibold text-indigo-300 mb-4">Automation</p>
149
+ <ul>
150
+ <li class="mb-2">
151
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
152
+ <i class="fas fa-robot mr-3"></i>
153
+ <span class="sidebar-text">AI Assistant</span>
154
+ </a>
155
+ </li>
156
+ <li class="mb-2">
157
+ <a href="#" class="flex items-center p-2 rounded-lg hover:bg-indigo-700">
158
+ <i class="fas fa-bolt mr-3"></i>
159
+ <span class="sidebar-text">Quick Apply</span>
160
+ </a>
161
+ </li>
162
+ </ul>
163
+ </div>
164
+ </nav>
165
+ </div>
166
+ <div class="p-4 border-t border-indigo-700">
167
+ <div class="flex items-center">
168
+ <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="User" class="w-10 h-10 rounded-full mr-3">
169
+ <div class="sidebar-text">
170
+ <p class="font-medium">John Doe</p>
171
+ <p class="text-xs text-indigo-300">Full Stack Developer</p>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Main Content -->
178
+ <div class="flex-1 overflow-auto">
179
+ <!-- Top Navigation -->
180
+ <header class="bg-white shadow-sm">
181
+ <div class="px-6 py-4 flex items-center justify-between">
182
+ <h1 class="text-2xl font-bold text-gray-800">Dashboard</h1>
183
+ <div class="flex items-center space-x-4">
184
+ <div id="upworkConnection" class="flex items-center mr-4">
185
+ <span class="connection-status connected"></span>
186
+ <span class="text-sm">Connected to Upwork</span>
187
+ </div>
188
+ <div class="relative">
189
+ <input type="text" placeholder="Search..." class="pl-10 pr-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500">
190
+ <i class="fas fa-search absolute left-3 top-3 text-gray-400"></i>
191
+ </div>
192
+ <button class="p-2 rounded-full bg-gray-100 text-gray-600 hover:bg-gray-200 relative">
193
+ <i class="fas fa-bell"></i>
194
+ <span class="absolute top-0 right-0 h-2 w-2 rounded-full bg-red-500"></span>
195
+ </button>
196
+ </div>
197
+ </div>
198
+ </header>
199
+
200
+ <!-- Main Content Area -->
201
+ <main class="p-6">
202
+ <!-- Stats Cards -->
203
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
204
+ <div class="bg-white rounded-xl shadow-sm p-6">
205
+ <div class="flex items-center justify-between">
206
+ <div>
207
+ <p class="text-sm font-medium text-gray-500">Active Projects</p>
208
+ <h3 id="activeProjectsCount" class="text-2xl font-bold text-gray-800">5</h3>
209
+ </div>
210
+ <div class="p-3 rounded-full bg-indigo-100 text-indigo-600">
211
+ <i class="fas fa-briefcase"></i>
212
+ </div>
213
+ </div>
214
+ <div class="mt-4">
215
+ <span class="text-sm font-medium text-green-600">+2 this week</span>
216
+ </div>
217
+ </div>
218
+ <div class="bg-white rounded-xl shadow-sm p-6">
219
+ <div class="flex items-center justify-between">
220
+ <div>
221
+ <p class="text-sm font-medium text-gray-500">Earnings (This Month)</p>
222
+ <h3 id="monthlyEarnings" class="text-2xl font-bold text-gray-800">$4,250</h3>
223
+ </div>
224
+ <div class="p-3 rounded-full bg-green-100 text-green-600">
225
+ <i class="fas fa-dollar-sign"></i>
226
+ </div>
227
+ </div>
228
+ <div class="mt-4">
229
+ <span class="text-sm font-medium text-green-600">12% increase</span>
230
+ </div>
231
+ </div>
232
+ <div class="bg-white rounded-xl shadow-sm p-6">
233
+ <div class="flex items-center justify-between">
234
+ <div>
235
+ <p class="text-sm font-medium text-gray-500">Job Applications</p>
236
+ <h3 id="jobApplications" class="text-2xl font-bold text-gray-800">18</h3>
237
+ </div>
238
+ <div class="p-3 rounded-full bg-blue-100 text-blue-600">
239
+ <i class="fas fa-paper-plane"></i>
240
+ </div>
241
+ </div>
242
+ <div class="mt-4">
243
+ <span class="text-sm font-medium text-green-600">3 interviews</span>
244
+ </div>
245
+ </div>
246
+ <div class="bg-white rounded-xl shadow-sm p-6">
247
+ <div class="flex items-center justify-between">
248
+ <div>
249
+ <p class="text-sm font-medium text-gray-500">Unread Messages</p>
250
+ <h3 id="unreadMessages" class="text-2xl font-bold text-gray-800">7</h3>
251
+ </div>
252
+ <div class="p-3 rounded-full bg-yellow-100 text-yellow-600">
253
+ <i class="fas fa-envelope"></i>
254
+ </div>
255
+ </div>
256
+ <div class="mt-4">
257
+ <span class="text-sm font-medium text-red-600">2 urgent</span>
258
+ </div>
259
+ </div>
260
+ </div>
261
+
262
+ <!-- Job Finder Section -->
263
+ <div id="jobs-section" class="mb-8">
264
+ <div class="flex items-center justify-between mb-6">
265
+ <h2 class="text-lg font-semibold text-gray-800">Job Finder</h2>
266
+ <div class="flex space-x-3">
267
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
268
+ <i class="fas fa-sync-alt mr-2"></i> Refresh Jobs
269
+ </button>
270
+ <div class="relative">
271
+ <select class="pl-3 pr-8 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-indigo-500 appearance-none">
272
+ <option>All Platforms</option>
273
+ <option>Upwork</option>
274
+ <option>Freelancer</option>
275
+ <option>Toptal</option>
276
+ </select>
277
+ <i class="fas fa-chevron-down absolute right-3 top-3 text-gray-400"></i>
278
+ </div>
279
+ </div>
280
+ </div>
281
+
282
+ <!-- Job Search Filters -->
283
+ <div class="bg-white rounded-xl shadow-sm p-6 mb-6">
284
+ <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
285
+ <div>
286
+ <label class="block text-sm font-medium text-gray-700 mb-1">Skills</label>
287
+ <div class="relative">
288
+ <input type="text" placeholder="React, Node, etc." class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
289
+ </div>
290
+ </div>
291
+ <div>
292
+ <label class="block text-sm font-medium text-gray-700 mb-1">Rate ($/hr)</label>
293
+ <div class="flex items-center space-x-2">
294
+ <input type="number" placeholder="Min" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
295
+ <span>-</span>
296
+ <input type="number" placeholder="Max" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
297
+ </div>
298
+ </div>
299
+ <div>
300
+ <label class="block text-sm font-medium text-gray-700 mb-1">Job Type</label>
301
+ <select class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500">
302
+ <option>All Types</option>
303
+ <option>Hourly</option>
304
+ <option>Fixed Price</option>
305
+ <option>Long-term</option>
306
+ </select>
307
+ </div>
308
+ <div class="flex items-end">
309
+ <button class="w-full px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
310
+ <i class="fas fa-filter mr-2"></i> Filter Jobs
311
+ </button>
312
+ </div>
313
+ </div>
314
+ </div>
315
+
316
+ <!-- Job Listings -->
317
+ <div class="grid grid-cols-1 gap-6">
318
+ <!-- Job Card 1 (High Match) -->
319
+ <div class="bg-white rounded-xl shadow-sm p-6 relative">
320
+ <div class="job-match-score match-high">92%</div>
321
+ <div class="flex items-start mb-4">
322
+ <img src="https://logo.clearbit.com/techcompany.com" alt="Company" class="w-12 h-12 rounded-lg mr-4">
323
+ <div>
324
+ <h3 class="text-lg font-semibold text-gray-800">Senior React Developer</h3>
325
+ <p class="text-sm text-gray-600">Tech Solutions Inc. • Posted 2 hours ago</p>
326
+ </div>
327
+ </div>
328
+ <div class="mb-4">
329
+ <p class="text-gray-700">We're looking for an experienced React developer to join our team building a next-generation e-commerce platform. You'll work with GraphQL, TypeScript, and our design system.</p>
330
+ </div>
331
+ <div class="flex flex-wrap gap-2 mb-4">
332
+ <span class="tag bg-blue-100 text-blue-800">React</span>
333
+ <span class="tag bg-purple-100 text-purple-800">TypeScript</span>
334
+ <span class="tag bg-green-100 text-green-800">GraphQL</span>
335
+ <span class="tag bg-yellow-100 text-yellow-800">Redux</span>
336
+ </div>
337
+ <div class="flex items-center justify-between">
338
+ <div>
339
+ <span class="text-lg font-semibold">$75-$90/hr</span>
340
+ <span class="text-sm text-gray-500 ml-2">• 20-30 hrs/week</span>
341
+ </div>
342
+ <div class="flex space-x-3">
343
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
344
+ <i class="far fa-bookmark mr-2"></i> Save
345
+ </button>
346
+ <button class="px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700">
347
+ <i class="fas fa-paper-plane mr-2"></i> Quick Apply
348
+ </button>
349
+ </div>
350
+ </div>
351
+ </div>
352
+
353
+ <!-- Job Card 2 (Medium Match) -->
354
+ <div class="bg-white rounded-xl shadow-sm p-6 relative">
355
+ <div class="job-match-score match-medium">76%</div>
356
+ <div class="flex items-start mb-4">
357
+ <img src="https://logo.clearbit.com/startup.com" alt="Company" class="w-12 h-12 rounded-lg mr-4">
358
+ <div>
359
+ <h3 class="text-lg font-semibold text-gray-800">Full Stack Developer (Node + React)</h3>
360
+ <p class="text-sm text-gray-600">Startup Ventures • Posted 1 day ago</p>
361
+ </div>
362
+ </div>
363
+ <div class="mb-4">
364
+ <p class="text-gray-700">Early-stage startup looking for a full-stack developer to help build our MVP. You'll be working directly with the founders on all aspects of the product.</p>
365
+ </div>
366
+ <div class="flex flex-wrap gap-2 mb-4">
367
+ <span class="tag bg-blue-100 text-blue-800">React</span>
368
+ <span class="tag bg-green-100 text-green-800">Node.js</span>
369
+ <span class="tag bg-red-100 text-red-800">MongoDB</span>
370
+ <span class="tag bg-indigo-100 text-indigo-800">AWS</span>
371
+ </div>
372
+ <div class="flex items-center justify-between">
373
+ <div>
374
+ <span class="text-lg font-semibold">$8,000-$12,000</span>
375
+ <span class="text-sm text-gray-500 ml-2">• Fixed Price</span>
376
+ </div>
377
+ <div class="flex space-x-3">
378
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
379
+ <i class="far fa-bookmark mr-2"></i> Save
380
+ </button>
381
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
382
+ <i class="fas fa-eye mr-2"></i> View Details
383
+ </button>
384
+ </div>
385
+ </div>
386
+ </div>
387
+ </div>
388
+ </div>
389
+
390
+ <!-- Messages Section -->
391
+ <div id="messages-section" class="mb-8">
392
+ <div class="flex items-center justify-between mb-6">
393
+ <h2 class="text-lg font-semibold text-gray-800">Client Messages</h2>
394
+ <div class="flex space-x-3">
395
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
396
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
397
+ </button>
398
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
399
+ <i class="fas fa-plus mr-2"></i> New Message
400
+ </button>
401
+ </div>
402
+ </div>
403
+
404
+ <div class="bg-white rounded-xl shadow-sm overflow-hidden">
405
+ <!-- Message List -->
406
+ <div class="divide-y">
407
+ <!-- Unread Message -->
408
+ <div class="message-unread p-4 flex items-start hover:bg-gray-50 cursor-pointer">
409
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4">
410
+ <div class="flex-1">
411
+ <div class="flex items-center justify-between mb-1">
412
+ <h3 class="font-semibold">Sarah Johnson</h3>
413
+ <span class="text-xs text-gray-500">2 hours ago</span>
414
+ </div>
415
+ <p class="text-sm text-gray-700 truncate">Hi John, I've reviewed the latest updates and have some feedback about the dashboard design. Can we schedule a call tomorrow to discuss?</p>
416
+ <div class="flex items-center mt-2 space-x-3">
417
+ <span class="text-xs px-2 py-1 bg-blue-100 text-blue-800 rounded-full">Project: E-commerce Site</span>
418
+ <span class="text-xs px-2 py-1 bg-red-100 text-red-800 rounded-full flex items-center">
419
+ <i class="fas fa-exclamation-circle mr-1"></i> Urgent
420
+ </span>
421
+ </div>
422
+ </div>
423
+ </div>
424
+
425
+ <!-- Read Message -->
426
+ <div class="p-4 flex items-start hover:bg-gray-50 cursor-pointer">
427
+ <img src="https://randomuser.me/api/portraits/men/75.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4">
428
+ <div class="flex-1">
429
+ <div class="flex items-center justify-between mb-1">
430
+ <h3 class="font-medium">Michael Chen</h3>
431
+ <span class="text-xs text-gray-500">1 day ago</span>
432
+ </div>
433
+ <p class="text-sm text-gray-700 truncate">The API endpoints are working perfectly now. Just wanted to say great job on the quick turnaround!</p>
434
+ <div class="flex items-center mt-2">
435
+ <span class="text-xs px-2 py-1 bg-green-100 text-green-800 rounded-full">Project: Mobile App Backend</span>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <!-- Message with AI Suggestion -->
441
+ <div class="p-4 flex items-start hover:bg-gray-50 cursor-pointer">
442
+ <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Client" class="w-10 h-10 rounded-full mr-4">
443
+ <div class="flex-1">
444
+ <div class="flex items-center justify-between mb-1">
445
+ <h3 class="font-medium">Emma Rodriguez</h3>
446
+ <span class="text-xs text-gray-500">3 days ago</span>
447
+ </div>
448
+ <p class="text-sm text-gray-700 truncate">I'm not sure about the color scheme for the landing page. Do you have any alternative suggestions?</p>
449
+ <div class="flex items-center mt-2">
450
+ <span class="text-xs px-2 py-1 bg-purple-100 text-purple-800 rounded-full">Project: Marketing Site</span>
451
+ </div>
452
+ <!-- AI Assistant Suggestion -->
453
+ <div class="mt-3 p-3 bg-gray-50 rounded-lg ai-assistant">
454
+ <div class="flex items-start mb-2">
455
+ <i class="fas fa-robot text-purple-600 mr-2 mt-1"></i>
456
+ <p class="text-sm font-medium text-gray-800">AI Reply Suggestion:</p>
457
+ </div>
458
+ <p class="text-sm text-gray-700 ml-6 mb-2">"I can prepare 2-3 alternative color schemes based on modern design trends. Would you prefer warm or cool tones for this project?"</p>
459
+ <button class="ml-6 text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700">
460
+ <i class="fas fa-paper-plane mr-1"></i> Use This Reply
461
+ </button>
462
+ </div>
463
+ </div>
464
+ </div>
465
+ </div>
466
+
467
+ <!-- Message Composer (Hidden by default) -->
468
+ <div id="messageComposer" class="p-4 bg-gray-50 border-t hidden">
469
+ <div class="mb-4">
470
+ <label class="block text-sm font-medium text-gray-700 mb-1">To:</label>
471
+ <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="client@example.com">
472
+ </div>
473
+ <div class="mb-4">
474
+ <label class="block text-sm font-medium text-gray-700 mb-1">Subject:</label>
475
+ <input type="text" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Project Update">
476
+ </div>
477
+ <div class="mb-4">
478
+ <textarea rows="5" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Type your message here..."></textarea>
479
+ </div>
480
+ <div class="flex justify-between items-center">
481
+ <div class="flex space-x-2">
482
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
483
+ <i class="fas fa-paperclip"></i>
484
+ </button>
485
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
486
+ <i class="fas fa-robot"></i>
487
+ </button>
488
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
489
+ <i class="fas fa-history"></i>
490
+ </button>
491
+ </div>
492
+ <div class="flex space-x-3">
493
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
494
+ Cancel
495
+ </button>
496
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
497
+ <i class="fas fa-paper-plane mr-2"></i> Send
498
+ </button>
499
+ </div>
500
+ </div>
501
+ </div>
502
+ </div>
503
+ </div>
504
+
505
+ <!-- Projects Section -->
506
+ <div class="mb-8">
507
+ <div class="flex items-center justify-between mb-6">
508
+ <h2 class="text-lg font-semibold text-gray-800">Active Projects</h2>
509
+ <div class="flex space-x-3">
510
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
511
+ <i class="fas fa-sync-alt mr-2"></i> Sync Projects
512
+ </button>
513
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500">
514
+ <i class="fas fa-plus mr-2"></i> New Project
515
+ </button>
516
+ </div>
517
+ </div>
518
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
519
+ <!-- Project Card 1 -->
520
+ <div class="project-card bg-white rounded-xl shadow-sm p-6 transition-all duration-300">
521
+ <div class="flex items-start justify-between mb-4">
522
+ <div>
523
+ <h3 class="text-lg font-semibold text-gray-800">E-commerce Website</h3>
524
+ <p class="text-sm text-gray-500">Client: Tech Solutions Inc.</p>
525
+ </div>
526
+ <span class="px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full">Active</span>
527
+ </div>
528
+ <p class="text-gray-600 mb-4">Building a complete e-commerce platform with payment integration and inventory management.</p>
529
+ <div class="mb-4">
530
+ <div class="flex items-center justify-between mb-1">
531
+ <span class="text-sm font-medium text-gray-500">Progress</span>
532
+ <span class="text-sm font-medium text-indigo-600">65%</span>
533
+ </div>
534
+ <div class="w-full bg-gray-200 rounded-full h-2">
535
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 65%"></div>
536
+ </div>
537
+ </div>
538
+ <div class="flex items-center justify-between text-sm">
539
+ <div>
540
+ <i class="fas fa-clock text-gray-400 mr-1"></i>
541
+ <span class="text-gray-500">42 hrs</span>
542
+ </div>
543
+ <div>
544
+ <i class="fas fa-dollar-sign text-gray-400 mr-1"></i>
545
+ <span class="text-gray-500">$2,800</span>
546
+ </div>
547
+ <div>
548
+ <i class="fas fa-calendar-alt text-gray-400 mr-1"></i>
549
+ <span class="text-gray-500">Jun 15</span>
550
+ </div>
551
+ </div>
552
+ </div>
553
+
554
+ <!-- Project Card 2 -->
555
+ <div class="project-card bg-white rounded-xl shadow-sm p-6 transition-all duration-300">
556
+ <div class="flex items-start justify-between mb-4">
557
+ <div>
558
+ <h3 class="text-lg font-semibold text-gray-800">Mobile App UI/UX</h3>
559
+ <p class="text-sm text-gray-500">Client: Startup Ventures</p>
560
+ </div>
561
+ <span class="px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full">Pending</span>
562
+ </div>
563
+ <p class="text-gray-600 mb-4">Designing the user interface and experience for a new fitness tracking mobile application.</p>
564
+ <div class="mb-4">
565
+ <div class="flex items-center justify-between mb-1">
566
+ <span class="text-sm font-medium text-gray-500">Progress</span>
567
+ <span class="text-sm font-medium text-indigo-600">90%</span>
568
+ </div>
569
+ <div class="w-full bg-gray-200 rounded-full h-2">
570
+ <div class="bg-indigo-600 h-2 rounded-full" style="width: 90%"></div>
571
+ </div>
572
+ </div>
573
+ <div class="flex items-center justify-between text-sm">
574
+ <div>
575
+ <i class="fas fa-clock text-gray-400 mr-1"></i>
576
+ <span class="text-gray-500">28 hrs</span>
577
+ </div>
578
+ <div>
579
+ <i class="fas fa-dollar-sign text-gray-400 mr-1"></i>
580
+ <span class="text-gray-500">$1,500</span>
581
+ </div>
582
+ <div>
583
+ <i class="fas fa-calendar-alt text-gray-400 mr-1"></i>
584
+ <span class="text-gray-500">Jun 20</span>
585
+ </div>
586
+ </div>
587
+ </div>
588
+ </div>
589
+ </div>
590
+ </main>
591
+ </div>
592
+ </div>
593
+
594
+ <!-- Job Application Modal -->
595
+ <div id="jobApplyModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
596
+ <div class="bg-white rounded-xl p-6 w-full max-w-2xl">
597
+ <div class="flex justify-between items-center mb-4">
598
+ <h3 class="text-xl font-bold text-gray-800">Apply to Senior React Developer</h3>
599
+ <button id="closeJobModal" class="text-gray-400 hover:text-gray-600">
600
+ <i class="fas fa-times"></i>
601
+ </button>
602
+ </div>
603
+ <div class="mb-6">
604
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
605
+ <div>
606
+ <label class="block text-sm font-medium text-gray-700 mb-1">Cover Letter</label>
607
+ <div class="bg-gray-50 p-4 rounded-lg mb-3">
608
+ <div class="flex items-center mb-2">
609
+ <input type="radio" id="cover1" name="cover" class="mr-2" checked>
610
+ <label for="cover1" class="text-sm">Default Template</label>
611
+ </div>
612
+ <div class="flex items-center mb-2">
613
+ <input type="radio" id="cover2" name="cover" class="mr-2">
614
+ <label for="cover2" class="text-sm">React Specialist</label>
615
+ </div>
616
+ <div class="flex items-center">
617
+ <input type="radio" id="cover3" name="cover" class="mr-2">
618
+ <label for="cover3" class="text-sm">Custom</label>
619
+ </div>
620
+ </div>
621
+ <textarea rows="8" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500" placeholder="Your cover letter...">Dear Hiring Manager,
622
+
623
+ I'm excited to apply for the Senior React Developer position. With 5+ years of React experience and expertise in TypeScript and GraphQL, I'm confident I can deliver high-quality results for your e-commerce platform.
624
+
625
+ My recent projects include:
626
+ - Built performant React storefront for [Similar Project]
627
+ - Optimized GraphQL queries reducing load times by 40%
628
+ - Led TypeScript migration for 50k LOC codebase
629
+
630
+ I'd love to discuss how I can contribute to your team. My portfolio and Upwork profile showcase additional relevant work.
631
+
632
+ Best regards,
633
+ John Doe</textarea>
634
+ </div>
635
+ <div>
636
+ <label class="block text-sm font-medium text-gray-700 mb-1">Rate Proposal</label>
637
+ <div class="bg-gray-50 p-4 rounded-lg mb-3">
638
+ <div class="flex items-center justify-between mb-2">
639
+ <div class="flex items-center">
640
+ <input type="radio" id="rate1" name="rate" class="mr-2" checked>
641
+ <label for="rate1" class="text-sm">$85/hr</label>
642
+ </div>
643
+ <span class="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Within range</span>
644
+ </div>
645
+ <div class="flex items-center justify-between mb-2">
646
+ <div class="flex items-center">
647
+ <input type="radio" id="rate2" name="rate" class="mr-2">
648
+ <label for="rate2" class="text-sm">$75/hr</label>
649
+ </div>
650
+ <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">Minimum</span>
651
+ </div>
652
+ <div class="flex items-center">
653
+ <input type="radio" id="rate3" name="rate" class="mr-2">
654
+ <label for="rate3" class="text-sm">Custom: $</label>
655
+ <input type="number" class="w-20 border-b ml-2 px-1">
656
+ <span class="text-sm ml-1">/hr</span>
657
+ </div>
658
+ </div>
659
+
660
+ <label class="block text-sm font-medium text-gray-700 mb-1">Attachments</label>
661
+ <div class="border-2 border-dashed border-gray-300 rounded-lg p-4 mb-3">
662
+ <div class="flex flex-col items-center justify-center">
663
+ <i class="fas fa-cloud-upload-alt text-gray-400 text-3xl mb-2"></i>
664
+ <p class="text-sm text-gray-500">Drag & drop files or <span class="text-indigo-600 cursor-pointer">browse</span></p>
665
+ </div>
666
+ </div>
667
+ <div class="text-xs text-gray-500 mb-4">
668
+ <p><i class="fas fa-check-circle text-green-500 mr-1"></i> Portfolio.pdf</p>
669
+ <p><i class="fas fa-check-circle text-green-500 mr-1"></i> React-Certificate.pdf</p>
670
+ </div>
671
+
672
+ <div class="flex items-center">
673
+ <input type="checkbox" id="saveTemplate" class="mr-2" checked>
674
+ <label for="saveTemplate" class="text-sm text-gray-700">Save as template for similar jobs</label>
675
+ </div>
676
+ </div>
677
+ </div>
678
+ </div>
679
+ <div class="flex justify-end space-x-3">
680
+ <button id="cancelJobBtn" class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">Cancel</button>
681
+ <button id="submitJobBtn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
682
+ <i class="fas fa-paper-plane mr-2"></i> Submit Application
683
+ </button>
684
+ </div>
685
+ </div>
686
+ </div>
687
+
688
+ <!-- Message Detail Modal -->
689
+ <div id="messageDetailModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
690
+ <div class="bg-white rounded-xl p-6 w-full max-w-3xl">
691
+ <div class="flex justify-between items-center mb-4">
692
+ <h3 class="text-xl font-bold text-gray-800">Message from Sarah Johnson</h3>
693
+ <button id="closeMessageModal" class="text-gray-400 hover:text-gray-600">
694
+ <i class="fas fa-times"></i>
695
+ </button>
696
+ </div>
697
+ <div class="mb-6">
698
+ <div class="bg-gray-50 p-4 rounded-lg mb-4">
699
+ <div class="flex items-center justify-between mb-2">
700
+ <div class="flex items-center">
701
+ <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="Client" class="w-8 h-8 rounded-full mr-3">
702
+ <div>
703
+ <p class="font-medium">Sarah Johnson</p>
704
+ <p class="text-xs text-gray-500">Client • E-commerce Site</p>
705
+ </div>
706
+ </div>
707
+ <span class="text-xs text-gray-500">Jun 15, 2023 10:24 AM</span>
708
+ </div>
709
+ <div class="pl-11">
710
+ <p class="text-gray-700 mb-3">Hi John,</p>
711
+ <p class="text-gray-700 mb-3">I've reviewed the latest updates and have some feedback about the dashboard design. The color scheme feels a bit too dark for our brand, and the navigation isn't as intuitive as we'd like.</p>
712
+ <p class="text-gray-700 mb-3">Can we schedule a call tomorrow to discuss? I'm available between 10 AM - 12 PM or after 3 PM EST.</p>
713
+ <p class="text-gray-700">Looking forward to your thoughts.</p>
714
+ <p class="text-gray-700 mt-3">Best,<br>Sarah</p>
715
+ </div>
716
+ </div>
717
+
718
+ <!-- AI Reply Suggestions -->
719
+ <div class="mb-6">
720
+ <div class="flex items-center mb-3">
721
+ <i class="fas fa-robot text-purple-600 mr-2"></i>
722
+ <h4 class="font-medium">AI Reply Suggestions</h4>
723
+ </div>
724
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
725
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-300">
726
+ <p class="text-sm font-medium text-gray-800 mb-2">Professional</p>
727
+ <p class="text-sm text-gray-700 mb-3">"Thanks for your feedback, Sarah. I'll prepare some alternative color schemes and navigation improvements. Would 11 AM EST work for our call?"</p>
728
+ <button class="text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700">
729
+ <i class="fas fa-paper-plane mr-1"></i> Use This
730
+ </button>
731
+ </div>
732
+ <div class="bg-gray-50 p-4 rounded-lg border border-gray-200 cursor-pointer hover:border-purple-300">
733
+ <p class="text-sm font-medium text-gray-800 mb-2">Friendly</p>
734
+ <p class="text-sm text-gray-700 mb-3">"Hi Sarah, I appreciate the feedback! Let's definitely go over the changes. How about we meet at 3:30 PM EST? I'll have some mockups ready to show you."</p>
735
+ <button class="text-xs px-3 py-1 bg-purple-600 text-white rounded hover:bg-purple-700">
736
+ <i class="fas fa-paper-plane mr-1"></i> Use This
737
+ </button>
738
+ </div>
739
+ </div>
740
+ </div>
741
+
742
+ <!-- Reply Composer -->
743
+ <div>
744
+ <label class="block text-sm font-medium text-gray-700 mb-1">Your Reply</label>
745
+ <textarea rows="5" class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-indigo-500 mb-3" placeholder="Type your reply here...">Hi Sarah,
746
+
747
+ Thank you for your feedback. I'll prepare 3 alternative color schemes with lighter tones and redesign the navigation structure.
748
+
749
+ 11 AM EST works perfectly for me. I'll send over some concepts before our call so we can discuss them in detail.
750
+
751
+ Looking forward to our conversation.
752
+
753
+ Best regards,
754
+ John</textarea>
755
+ <div class="flex justify-between items-center">
756
+ <div class="flex space-x-2">
757
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
758
+ <i class="fas fa-paperclip"></i>
759
+ </button>
760
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
761
+ <i class="fas fa-robot"></i>
762
+ </button>
763
+ <button class="p-2 text-gray-400 hover:text-indigo-600">
764
+ <i class="fas fa-history"></i>
765
+ </button>
766
+ </div>
767
+ <div class="flex space-x-3">
768
+ <button class="px-4 py-2 border border-gray-300 text-gray-700 rounded-lg hover:bg-gray-50">
769
+ Save Draft
770
+ </button>
771
+ <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
772
+ <i class="fas fa-paper-plane mr-2"></i> Send
773
+ </button>
774
+ </div>
775
+ </div>
776
+ </div>
777
+ </div>
778
+ </div>
779
+ </div>
780
+
781
+ <!-- Scripts -->
782
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
783
+ <script>
784
+ // DOM elements
785
+ const jobApplyModal = document.getElementById('jobApplyModal');
786
+ const closeJobModal = document.getElementById('closeJobModal');
787
+ const cancelJobBtn = document.getElementById('cancelJobBtn');
788
+ const submitJobBtn = document.getElementById('submitJobBtn');
789
+ const messageDetailModal = document.getElementById('messageDetailModal');
790
+ const closeMessageModal = document.getElementById('closeMessageModal');
791
+ const messageComposer = document.getElementById('messageComposer');
792
+
793
+ // Sample data
794
+ const jobApplications = [
795
+ {
796
+ id: 1,
797
+ title: "Senior React Developer",
798
+ client: "Tech Solutions Inc.",
799
+ date: "2023-06-15",
800
+ status: "submitted",
801
+ rate: "$85/hr",
802
+ match: 92
803
+ },
804
+ {
805
+ id: 2,
806
+ title: "Full Stack Developer",
807
+ client: "Startup Ventures",
808
+ date: "2023-06-14",
809
+ status: "viewed",
810
+ rate: "$8,000-$12,000",
811
+ match: 76
812
+ }
813
+ ];
814
+
815
+ const messages = [
816
+ {
817
+ id: 1,
818
+ client: "Sarah Johnson",
819
+ project: "E-commerce Site",
820
+ date: "2 hours ago",
821
+ content: "Hi John, I've reviewed the latest updates and have some feedback about the dashboard design. Can we schedule a call tomorrow to discuss?",
822
+ urgent: true,
823
+ unread: true
824
+ },
825
+ {
826
+ id: 2,
827
+ client: "Michael Chen",
828
+ project: "Mobile App Backend",
829
+ date: "1 day ago",
830
+ content: "The API endpoints are working perfectly now. Just wanted to say great job on the quick turnaround!",
831
+ urgent: false,
832
+ unread: false
833
+ }
834
+ ];
835
+
836
+ // Event listeners
837
+ document.querySelectorAll('.project-card').forEach(card => {
838
+ card.addEventListener('click', () => {
839
+ // In a real app, this would open project details
840
+ console.log('Project clicked');
841
+ });
842
+ });
843
+
844
+ document.querySelectorAll('.job-match-score').forEach(score => {
845
+ score.addEventListener('click', () => {
846
+ // Show match details tooltip in a real app
847
+ console.log('Match score clicked');
848
+ });
849
+ });
850
+
851
+ document.querySelectorAll('.quick-apply-btn').forEach(btn => {
852
+ btn.addEventListener('click', () => {
853
+ jobApplyModal.classList.remove('hidden');
854
+ });
855
+ });
856
+
857
+ closeJobModal.addEventListener('click', () => {
858
+ jobApplyModal.classList.add('hidden');
859
+ });
860
+
861
+ cancelJobBtn.addEventListener('click', () => {
862
+ jobApplyModal.classList.add('hidden');
863
+ });
864
+
865
+ submitJobBtn.addEventListener('click', () => {
866
+ // In a real app, this would submit the application
867
+ jobApplyModal.classList.add('hidden');
868
+
869
+ // Show success notification
870
+ const notification = document.createElement('div');
871
+ notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center';
872
+ notification.innerHTML = `
873
+ <i class="fas fa-check-circle mr-2"></i>
874
+ <span>Application submitted successfully</span>
875
+ `;
876
+ document.body.appendChild(notification);
877
+
878
+ setTimeout(() => {
879
+ notification.remove();
880
+ }, 3000);
881
+ });
882
+
883
+ document.querySelectorAll('.message-unread, .message-read').forEach(message => {
884
+ message.addEventListener('click', () => {
885
+ messageDetailModal.classList.remove('hidden');
886
+
887
+ // In a real app, this would mark as read
888
+ message.classList.remove('message-unread');
889
+ message.classList.add('message-read');
890
+ });
891
+ });
892
+
893
+ closeMessageModal.addEventListener('click', () => {
894
+ messageDetailModal.classList.add('hidden');
895
+ });
896
+
897
+ document.querySelectorAll('.new-message-btn').forEach(btn => {
898
+ btn.addEventListener('click', () => {
899
+ messageComposer.classList.remove('hidden');
900
+ });
901
+ });
902
+
903
+ // Initialize charts
904
+ function initCharts() {
905
+ // Earnings chart would be initialized here
906
+ console.log('Charts initialized');
907
+ }
908
+
909
+ // Initialize the app
910
+ document.addEventListener('DOMContentLoaded', () => {
911
+ initCharts();
912
+
913
+ // Simulate unread messages
914
+ const unreadCount = messages.filter(m => m.unread).length;
915
+ document.getElementById('unreadMessages').textContent = unreadCount;
916
+
917
+ // Simulate job applications
918
+ document.getElementById('jobApplications').textContent = jobApplications.length;
919
+ });
920
+ </script>
921
+ <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=LucianoM39/https-huggingface-co-lucianom39" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
922
+ </html>
prompts.txt ADDED
@@ -0,0 +1,3 @@
 
 
 
 
1
+ does this app serach for jobs, apply for jobs, and manage messages with clients?
2
+ is this app really connected to upwork.con or is a simulation?
3
+ does it really connect by real to upwork.com or is a simulation?