Hugging Face's logo

Spaces:
mvbhr
/
webmail-client-interface
Running

App Files Community
mvbhr commited on
Commit
718a771
·
verified ·
1 Parent(s): a7b5792

Promote version 65e2215 to main

Browse files

Promoted commit 65e2215a8a75f45d7398a8b4a1b4f61c711dce2a to main branch

Files changed (1) hide show
  1. index.html +66 -286
index.html CHANGED
@@ -137,53 +137,40 @@
137
  <div class="p-6">
138
  <div class="flex items-center justify-between mb-6">
139
  <h2 class="text-xl font-bold text-white">Inbox</h2>
140
- <div class="flex space-x-2">
141
- <button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
142
- <i data-feather="refresh-cw" class="text-white"></i>
143
- </button>
144
- <div class="relative">
145
- <button id="view-toggle" class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
146
- <i data-feather="eye" class="text-white"></i>
147
- </button>
148
- <div id="view-options" class="absolute right-0 mt-2 w-48 bg-white bg-opacity-20 backdrop-blur-lg rounded-lg shadow-lg border border-white border-opacity-20 hidden z-10">
149
- <div class="py-1">
150
- <button type="button" class="view-option w-full text-left px-4 py-2 text-sm text-white hover:bg-white hover:bg-opacity-10 transition" data-view="simple">
151
- <i data-feather="eye" class="w-4 h-4 mr-2 inline"></i>
152
- Header Simples
153
- </button>
154
- <button type="button" class="view-option w-full text-left px-4 py-2 text-sm text-white hover:bg-white hover:bg-opacity-10 transition" data-view="full">
155
- <i data-feather="eye-off" class="w-4 h-4 mr-2 inline"></i>
156
- Header Completo
157
- </button>
158
- </div>
159
  </div>
160
  </div>
161
- </div>
162
  <!-- Email Items -->
163
- <div class="space-y-3" id="email-list">
164
- <!-- Email 1 - Simple View -->
165
- <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="1">
166
- <div class="simple-view">
167
- <div class="flex items-start">
168
- <div class="flex-shrink-0 mr-4">
169
- <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
170
- <span class="text-white font-medium">JD</span>
171
- </div>
172
  </div>
173
- <div class="flex-1 min-w-0">
174
- <div class="flex items-center justify-between">
175
- <h3 class="text-white font-medium truncate">John Doe</h3>
 
176
  <div class="flex items-center space-x-3">
177
  <span class="text-white text-opacity-70 text-sm">10:30 AM</span>
178
  <button class="text-white text-opacity-70 hover:text-opacity-100">
179
- <i data-feather="star" class="w-4 h-4"></i>
180
- </button>
 
181
  </div>
 
 
182
  </div>
183
- <p class="text-white text-opacity-90 font-medium truncate mt-1">Project Update - Q3 Results</p>
184
- <p class="text-white text-opacity-70 truncate mt-1">Hi there, I wanted to share the latest updates on our project progress and the Q3 results...</p>
185
- </div>
186
- <div class="flex-shrink-0 ml-4 flex space-x-2">
187
  <button class="text-white text-opacity-70 hover:text-opacity-100">
188
  <i data-feather="paperclip" class="w-4 h-4"></i>
189
  </button>
@@ -192,70 +179,30 @@
192
  </button>
193
  </div>
194
  </div>
195
- <div class="full-view hidden">
196
- <div class="border-b border-white border-opacity-20 pb-3 mb-3">
197
- <div class="flex items-center justify-between">
198
- <div class="flex items-center space-x-3">
199
- <div class="flex items-center">
200
- <div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
201
- <span class="text-white font-medium text-sm">JD</span>
202
- </div>
203
- <h3 class="text-white font-medium">John Doe</h3>
204
- </div>
205
- <span class="text-white text-opacity-70 text-sm">10:30 AM</span>
206
- </div>
207
- <p class="text-white text-opacity-90 font-medium mt-2">Project Update - Q3 Results</p>
208
- </div>
209
- <div class="space-y-2 text-sm">
210
- <div class="flex">
211
- <span class="text-white text-opacity-70 w-20">From:</span>
212
- <span class="text-white">John Doe &lt;john.doe@company.com&gt;</span>
213
- </div>
214
- <div class="flex">
215
- <span class="text-white text-opacity-70 w-20">To:</span>
216
- <span class="text-white">me@example.com</span>
217
- </div>
218
- <div class="flex">
219
- <span class="text-white text-opacity-70 w-20">Date:</span>
220
- <span class="text-white">Today, 10:30 AM</span>
221
- </div>
222
- <div class="flex">
223
- <span class="text-white text-opacity-70 w-20">Subject:</span>
224
- <span class="text-white">Project Update - Q3 Results</span>
225
- </div>
226
- </div>
227
- <p class="text-white text-opacity-70 mt-4">Hi there, I wanted to share the latest updates on our project progress and the Q3 results. We've achieved significant milestones this quarter...</p>
228
- <div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
229
- <button class="text-white text-opacity-70 hover:text-opacity-100">
230
- <i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
231
- <span class="text-sm">attachments.zip (2.4 MB)</span>
232
- </button>
233
- </div>
234
- </div>
235
  </div>
236
- <!-- Email 2 - Simple View -->
237
- <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="2">
238
- <div class="simple-view">
239
- <div class="flex items-start">
240
- <div class="flex-shrink-0 mr-4">
241
- <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
242
- <span class="text-white font-medium">AC</span>
243
- </div>
244
  </div>
245
- <div class="flex-1 min-w-0">
246
- <div class="flex items-center justify-between">
247
- <h3 class="text-white font-medium truncate">Amazon Customer</h3>
 
248
  <div class="flex items-center space-x-3">
249
  <span class="text-white text-opacity-70 text-sm">Yesterday</span>
250
  <button class="text-white text-opacity-70 hover:text-opacity-100">
251
- <i data-feather="star" class="w-4 h-4"></i>
252
- </button>
 
253
  </div>
 
 
254
  </div>
255
- <p class="text-white text-opacity-90 font-medium truncate mt-1">Your Order #12345 Has Shipped</p>
256
- <p class="text-white text-opacity-70 truncate mt-1">Great news! Your order has been shipped and is on its way to you...</p>
257
- </div>
258
- <div class="flex-shrink-0 ml-4 flex space-x-2">
259
  <button class="text-white text-opacity-70 hover:text-opacity-100">
260
  <i data-feather="paperclip" class="w-4 h-4"></i>
261
  </button>
@@ -264,59 +211,19 @@
264
  </button>
265
  </div>
266
  </div>
267
- <div class="full-view hidden">
268
- <div class="border-b border-white border-opacity-20 pb-3 mb-3">
269
- <div class="flex items-center justify-between">
270
- <div class="flex items-center space-x-3">
271
- <div class="flex items-center">
272
- <div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
273
- <span class="text-white font-medium text-sm">AC</span>
274
- </div>
275
- <h3 class="text-white font-medium">Amazon Customer</h3>
276
- </div>
277
- <span class="text-white text-opacity-70 text-sm">Yesterday</span>
278
- </div>
279
- <p class="text-white text-opacity-90 font-medium mt-2">Your Order #12345 Has Shipped</p>
280
- </div>
281
- <div class="space-y-2 text-sm">
282
- <div class="flex">
283
- <span class="text-white text-opacity-70 w-20">From:</span>
284
- <span class="text-white">orders@amazon.com</span>
285
- </div>
286
- <div class="flex">
287
- <span class="text-white text-opacity-70 w-20">To:</span>
288
- <span class="text-white">me@example.com</span>
289
- </div>
290
- <div class="flex">
291
- <span class="text-white text-opacity-70 w-20">Date:</span>
292
- <span class="text-white">Yesterday, 3:45 PM</span>
293
- </div>
294
- <div class="flex">
295
- <span class="text-white text-opacity-70 w-20">Subject:</span>
296
- <span class="text-white">Your Order #12345 Has Shipped</span>
297
- </div>
298
- </div>
299
- <p class="text-white text-opacity-70 mt-4">Great news! Your order has been shipped and is on its way to you. You can track your package using the following link...</p>
300
- <div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
301
- <button class="text-white text-opacity-70 hover:text-opacity-100">
302
- <i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
303
- <span class="text-sm">tracking_info.pdf (156 KB)</span>
304
- </button>
305
- </div>
306
- </div>
307
  </div>
308
- <!-- Email 3 - Simple View -->
309
- <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="3">
310
- <div class="simple-view">
311
- <div class="flex items-start">
312
- <div class="flex-shrink-0 mr-4">
313
- <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
314
- <span class="text-white font-medium">TW</span>
315
- </div>
316
  </div>
317
- <div class="flex-1 min-w-0">
318
- <div class="flex items-center justify-between">
319
- <h3 class="text-white font-medium truncate">Team Workshop</h3>
 
320
  <div class="flex items-center space-x-3">
321
  <span class="text-white text-opacity-70 text-sm">Oct 12</span>
322
  <button class="text-yellow-300">
@@ -336,59 +243,19 @@
336
  </button>
337
  </div>
338
  </div>
339
- <div class="full-view hidden">
340
- <div class="border-b border-white border-opacity-20 pb-3 mb-3">
341
- <div class="flex items-center justify-between">
342
- <div class="flex items-center space-x-3">
343
- <div class="flex items-center">
344
- <div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
345
- <span class="text-white font-medium text-sm">TW</span>
346
- </div>
347
- <h3 class="text-white font-medium">Team Workshop</h3>
348
- </div>
349
- <span class="text-white text-opacity-70 text-sm">Oct 12</span>
350
- </div>
351
- <p class="text-white text-opacity-90 font-medium mt-2">Reminder: Design Workshop Tomorrow</p>
352
- </div>
353
- <div class="space-y-2 text-sm">
354
- <div class="flex">
355
- <span class="text-white text-opacity-70 w-20">From:</span>
356
- <span class="text-white">workshop@company.com</span>
357
- </div>
358
- <div class="flex">
359
- <span class="text-white text-opacity-70 w-20">To:</span>
360
- <span class="text-white">All Employees &lt;employees@company.com&gt;</span>
361
- </div>
362
- <div class="flex">
363
- <span class="text-white text-opacity-70 w-20">Date:</span>
364
- <span class="text-white">October 12, 2024</span>
365
- </div>
366
- <div class="flex">
367
- <span class="text-white text-opacity-70 w-20">Subject:</span>
368
- <span class="text-white">Reminder: Design Workshop Tomorrow</span>
369
- </div>
370
- </div>
371
- <p class="text-white text-opacity-70 mt-4">This is a reminder that our quarterly design workshop will be held tomorrow at 2 PM in the main conference room. Please bring your laptops and any relevant materials...</p>
372
- <div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
373
- <button class="text-white text-opacity-70 hover:text-opacity-100">
374
- <i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
375
- <span class="text-sm">agenda.pdf (89 KB)</span>
376
- </button>
377
- </div>
378
- </div>
379
  </div>
380
- <!-- Email 4 - Simple View -->
381
- <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300" data-email-id="4">
382
- <div class="simple-view">
383
- <div class="flex items-start">
384
- <div class="flex-shrink-0 mr-4">
385
- <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
386
- <span class="text-white font-medium">SP</span>
387
- </div>
388
  </div>
389
- <div class="flex-1 min-w-0">
390
- <div class="flex items-center justify-between">
391
- <h3 class="text-white font-medium truncate">Sarah Parker</h3>
 
392
  <div class="flex items-center space-x-3">
393
  <span class="text-white text-opacity-70 text-sm">Oct 11</span>
394
  <button class="text-white text-opacity-70 hover:text-opacity-100">
@@ -408,49 +275,9 @@
408
  </button>
409
  </div>
410
  </div>
411
- <div class="full-view hidden">
412
- <div class="border-b border-white border-opacity-20 pb-3 mb-3">
413
- <div class="flex items-center justify-between">
414
- <div class="flex items-center space-x-3">
415
- <div class="flex items-center">
416
- <div class="avatar-placeholder w-8 h-8 rounded-full flex items-center justify-center mr-2">
417
- <span class="text-white font-medium text-sm">SP</span>
418
- </div>
419
- <h3 class="text-white font-medium">Sarah Parker</h3>
420
- </div>
421
- <span class="text-white text-opacity-70 text-sm">Oct 11</span>
422
- </div>
423
- <p class="text-white text-opacity-90 font-medium mt-2">Meeting Notes - Product Launch</p>
424
- </div>
425
- <div class="space-y-2 text-sm">
426
- <div class="flex">
427
- <span class="text-white text-opacity-70 w-20">From:</span>
428
- <span class="text-white">sarah.parker@company.com</span>
429
- </div>
430
- <div class="flex">
431
- <span class="text-white text-opacity-70 w-20">To:</span>
432
- <span class="text-white">Product Team &lt;product@company.com&gt;</span>
433
- </div>
434
- <div class="flex">
435
- <span class="text-white text-opacity-70 w-20">Date:</span>
436
- <span class="text-white">October 11, 2024</span>
437
- </div>
438
- <div class="flex">
439
- <span class="text-white text-opacity-70 w-20">Subject:</span>
440
- <span class="text-white">Meeting Notes - Product Launch</span>
441
- </div>
442
- </div>
443
- <p class="text-white text-opacity-70 mt-4">Here are the notes from yesterday's meeting regarding the upcoming product launch. Key decisions were made regarding the timeline and feature prioritization...</p>
444
- <div class="flex items-center space-x-4 mt-4 pt-3 border-t border-white border-opacity-20">
445
- <button class="text-white text-opacity-70 hover:text-opacity-100">
446
- <i data-feather="paperclip" class="w-4 h-4 mr-1"></i>
447
- <span class="text-sm">meeting_notes.pdf (234 KB)</span>
448
- </button>
449
- </div>
450
- </div>
451
  </div>
452
  </div>
453
- </div>
454
  </main>
455
  </div>
456
  </div>
@@ -474,53 +301,6 @@
474
  backgroundColor: 0x0,
475
  size: 1.00
476
  });
477
- // View toggle functionality
478
- const viewToggle = document.getElementById('view-toggle');
479
- const viewOptions = document.getElementById('view-options');
480
- const emailCards = document.querySelectorAll('.email-card');
481
-
482
- viewToggle.addEventListener('click', () => {
483
- viewOptions.classList.toggle('hidden');
484
- });
485
-
486
- // Close view options when clicking outside
487
- document.addEventListener('click', (e) => {
488
- if (!viewToggle.contains(e.target) && !viewOptions.contains(e.target)) {
489
- viewOptions.classList.add('hidden');
490
- }
491
- });
492
-
493
- // View option selection
494
- document.querySelectorAll('.view-option').forEach(option => {
495
- option.addEventListener('click', () => {
496
- const viewType = option.getAttribute('data-view');
497
-
498
- // Update all email cards to show selected view
499
- emailCards.forEach(card => {
500
- const simpleView = card.querySelector('.simple-view');
501
- const fullView = card.querySelector('.full-view');
502
-
503
- if (viewType === 'simple') {
504
- simpleView.classList.remove('hidden');
505
- fullView.classList.add('hidden');
506
- } else {
507
- simpleView.classList.add('hidden');
508
- fullView.classList.remove('hidden');
509
- }
510
-
511
- // Update button icon based on selected view
512
- const icon = viewToggle.querySelector('i');
513
- if (viewType === 'simple') {
514
- icon.setAttribute('data-feather', 'eye');
515
- } else {
516
- icon.setAttribute('data-feather', 'eye-off');
517
- }
518
- feather.replace();
519
-
520
- // Close the options menu
521
- viewOptions.classList.add('hidden');
522
- });
523
- });
524
 
525
  // Add hover effects to email cards
526
  document.querySelectorAll('.email-card').forEach(card => {
@@ -532,6 +312,6 @@
532
  card.style.transform = 'translateY(0)';
533
  });
534
  });
535
- </script>
536
  </body>
537
  </html>
 
137
  <div class="p-6">
138
  <div class="flex items-center justify-between mb-6">
139
  <h2 class="text-xl font-bold text-white">Inbox</h2>
140
+ <div class="flex space-x-2">
141
+ <button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
142
+ <i data-feather="refresh-cw" class="text-white"></i>
143
+ </button>
144
+ <button class="p-2 rounded-lg bg-white bg-opacity-20 hover:bg-opacity-30 transition">
145
+ <i data-feather="more-vertical" class="text-white"></i>
146
+ </button>
 
 
 
 
 
 
 
 
 
 
 
 
147
  </div>
148
  </div>
149
+
150
  <!-- Email Items -->
151
+ <div class="space-y-3">
152
+ <!-- Email 1 -->
153
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
154
+ <div class="flex items-start">
155
+ <div class="flex-shrink-0 mr-4">
156
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
157
+ <span class="text-white font-medium">JD</span>
 
 
158
  </div>
159
+ </div>
160
+ <div class="flex-1 min-w-0">
161
+ <div class="flex items-center justify-between">
162
+ <h3 class="text-white font-medium truncate">John Doe</h3>
163
  <div class="flex items-center space-x-3">
164
  <span class="text-white text-opacity-70 text-sm">10:30 AM</span>
165
  <button class="text-white text-opacity-70 hover:text-opacity-100">
166
+ <i data-feather="star" class="w-4 h-4"></i>
167
+ </button>
168
+ </div>
169
  </div>
170
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Project Update - Q3 Results</p>
171
+ <p class="text-white text-opacity-70 truncate mt-1">Hi there, I wanted to share the latest updates on our project progress and the Q3 results...</p>
172
  </div>
173
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
 
 
 
174
  <button class="text-white text-opacity-70 hover:text-opacity-100">
175
  <i data-feather="paperclip" class="w-4 h-4"></i>
176
  </button>
 
179
  </button>
180
  </div>
181
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
182
  </div>
183
+
184
+ <!-- Email 2 -->
185
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
186
+ <div class="flex items-start">
187
+ <div class="flex-shrink-0 mr-4">
188
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
189
+ <span class="text-white font-medium">AC</span>
 
190
  </div>
191
+ </div>
192
+ <div class="flex-1 min-w-0">
193
+ <div class="flex items-center justify-between">
194
+ <h3 class="text-white font-medium truncate">Amazon Customer</h3>
195
  <div class="flex items-center space-x-3">
196
  <span class="text-white text-opacity-70 text-sm">Yesterday</span>
197
  <button class="text-white text-opacity-70 hover:text-opacity-100">
198
+ <i data-feather="star" class="w-4 h-4"></i>
199
+ </button>
200
+ </div>
201
  </div>
202
+ <p class="text-white text-opacity-90 font-medium truncate mt-1">Your Order #12345 Has Shipped</p>
203
+ <p class="text-white text-opacity-70 truncate mt-1">Great news! Your order has been shipped and is on its way to you...</p>
204
  </div>
205
+ <div class="flex-shrink-0 ml-4 flex space-x-2">
 
 
 
206
  <button class="text-white text-opacity-70 hover:text-opacity-100">
207
  <i data-feather="paperclip" class="w-4 h-4"></i>
208
  </button>
 
211
  </button>
212
  </div>
213
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
214
  </div>
215
+
216
+ <!-- Email 3 -->
217
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
218
+ <div class="flex items-start">
219
+ <div class="flex-shrink-0 mr-4">
220
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
221
+ <span class="text-white font-medium">TW</span>
 
222
  </div>
223
+ </div>
224
+ <div class="flex-1 min-w-0">
225
+ <div class="flex items-center justify-between">
226
+ <h3 class="text-white font-medium truncate">Team Workshop</h3>
227
  <div class="flex items-center space-x-3">
228
  <span class="text-white text-opacity-70 text-sm">Oct 12</span>
229
  <button class="text-yellow-300">
 
243
  </button>
244
  </div>
245
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
246
  </div>
247
+
248
+ <!-- Email 4 -->
249
+ <div class="email-card bg-white bg-opacity-20 backdrop-blur-sm rounded-xl p-4 cursor-pointer transition-all duration-300">
250
+ <div class="flex items-start">
251
+ <div class="flex-shrink-0 mr-4">
252
+ <div class="avatar-placeholder w-10 h-10 rounded-full flex items-center justify-center">
253
+ <span class="text-white font-medium">SP</span>
 
254
  </div>
255
+ </div>
256
+ <div class="flex-1 min-w-0">
257
+ <div class="flex items-center justify-between">
258
+ <h3 class="text-white font-medium truncate">Sarah Parker</h3>
259
  <div class="flex items-center space-x-3">
260
  <span class="text-white text-opacity-70 text-sm">Oct 11</span>
261
  <button class="text-white text-opacity-70 hover:text-opacity-100">
 
275
  </button>
276
  </div>
277
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
278
  </div>
279
  </div>
280
+ </div>
281
  </main>
282
  </div>
283
  </div>
 
301
  backgroundColor: 0x0,
302
  size: 1.00
303
  });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
304
 
305
  // Add hover effects to email cards
306
  document.querySelectorAll('.email-card').forEach(card => {
 
312
  card.style.transform = 'translateY(0)';
313
  });
314
  });
315
+ </script>
316
  </body>
317
  </html>