Hugging Face's logo

Spaces:
molonelaveh
/
email-client
Running

App Files Community
molonelaveh commited on
Commit
d2978f0
·
verified ·
1 Parent(s): ec8e3a6

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +712 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Email Client
3
- emoji: ⚡
4
- colorFrom: yellow
5
- colorTo: purple
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: email-client
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: blue
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,712 @@
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>NeonMail 2035</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
+ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;700&family=Roboto+Mono:wght@300;400;500&display=swap');
11
+
12
+ :root {
13
+ --neon-pink: #ff2a6d;
14
+ --neon-blue: #05d9e8;
15
+ --neon-purple: #d300c5;
16
+ --neon-green: #00ff9d;
17
+ --neon-yellow: #f9f002;
18
+ --dark-bg: #0d0221;
19
+ }
20
+
21
+ body {
22
+ font-family: 'Roboto Mono', monospace;
23
+ background-color: var(--dark-bg);
24
+ color: white;
25
+ overflow-x: hidden;
26
+ }
27
+
28
+ .title-font {
29
+ font-family: 'Orbitron', sans-serif;
30
+ }
31
+
32
+ .neon-text-pink {
33
+ color: var(--neon-pink);
34
+ text-shadow: 0 0 10px var(--neon-pink), 0 0 20px var(--neon-pink);
35
+ }
36
+
37
+ .neon-text-blue {
38
+ color: var(--neon-blue);
39
+ text-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue);
40
+ }
41
+
42
+ .neon-text-purple {
43
+ color: var(--neon-purple);
44
+ text-shadow: 0 0 10px var(--neon-purple), 0 0 20px var(--neon-purple);
45
+ }
46
+
47
+ .neon-border-pink {
48
+ border-color: var(--neon-pink);
49
+ box-shadow: 0 0 10px var(--neon-pink), inset 0 0 10px var(--neon-pink);
50
+ }
51
+
52
+ .neon-border-blue {
53
+ border-color: var(--neon-blue);
54
+ box-shadow: 0 0 10px var(--neon-blue), inset 0 0 10px var(--neon-blue);
55
+ }
56
+
57
+ .neon-border-purple {
58
+ border-color: var(--neon-purple);
59
+ box-shadow: 0 0 10px var(--neon-purple), inset 0 0 10px var(--neon-purple);
60
+ }
61
+
62
+ .neon-border-green {
63
+ border-color: var(--neon-green);
64
+ box-shadow: 0 0 10px var(--neon-green), inset 0 0 10px var(--neon-green);
65
+ }
66
+
67
+ .neon-border-yellow {
68
+ border-color: var(--neon-yellow);
69
+ box-shadow: 0 0 10px var(--neon-yellow), inset 0 0 10px var(--neon-yellow);
70
+ }
71
+
72
+ .neon-bg-pink {
73
+ background-color: rgba(255, 42, 109, 0.1);
74
+ box-shadow: 0 0 15px rgba(255, 42, 109, 0.5);
75
+ }
76
+
77
+ .neon-bg-blue {
78
+ background-color: rgba(5, 217, 232, 0.1);
79
+ box-shadow: 0 0 15px rgba(5, 217, 232, 0.5);
80
+ }
81
+
82
+ .neon-bg-purple {
83
+ background-color: rgba(211, 0, 197, 0.1);
84
+ box-shadow: 0 0 15px rgba(211, 0, 197, 0.5);
85
+ }
86
+
87
+ .neon-bg-green {
88
+ background-color: rgba(0, 255, 157, 0.1);
89
+ box-shadow: 0 0 15px rgba(0, 255, 157, 0.5);
90
+ }
91
+
92
+ .neon-bg-yellow {
93
+ background-color: rgba(249, 240, 2, 0.1);
94
+ box-shadow: 0 0 15px rgba(249, 240, 2, 0.5);
95
+ }
96
+
97
+ .glow-on-hover:hover {
98
+ filter: brightness(1.2);
99
+ transform: scale(1.02);
100
+ transition: all 0.3s ease;
101
+ }
102
+
103
+ .pulse {
104
+ animation: pulse 2s infinite;
105
+ }
106
+
107
+ @keyframes pulse {
108
+ 0% { opacity: 0.7; }
109
+ 50% { opacity: 1; }
110
+ 100% { opacity: 0.7; }
111
+ }
112
+
113
+ .scanline {
114
+ position: relative;
115
+ overflow: hidden;
116
+ }
117
+
118
+ .scanline::after {
119
+ content: '';
120
+ position: absolute;
121
+ top: 0;
122
+ left: 0;
123
+ right: 0;
124
+ height: 2px;
125
+ background: linear-gradient(to bottom, transparent, var(--neon-blue), transparent);
126
+ animation: scan 8s linear infinite;
127
+ }
128
+
129
+ @keyframes scan {
130
+ 0% { top: -100%; }
131
+ 100% { top: 100%; }
132
+ }
133
+
134
+ .message-preview {
135
+ border-left: 3px solid transparent;
136
+ transition: all 0.3s ease;
137
+ }
138
+
139
+ .message-preview:hover {
140
+ border-left-color: var(--neon-green);
141
+ background-color: rgba(0, 255, 157, 0.05);
142
+ }
143
+
144
+ .message-preview.unread {
145
+ border-left-color: var(--neon-pink);
146
+ }
147
+
148
+ .message-preview.important {
149
+ border-left-color: var(--neon-yellow);
150
+ }
151
+
152
+ .message-preview.flagged {
153
+ border-left-color: var(--neon-purple);
154
+ }
155
+
156
+ .neon-input {
157
+ background-color: rgba(255, 255, 255, 0.05);
158
+ border: 1px solid var(--neon-blue);
159
+ color: white;
160
+ transition: all 0.3s ease;
161
+ }
162
+
163
+ .neon-input:focus {
164
+ outline: none;
165
+ border-color: var(--neon-green);
166
+ box-shadow: 0 0 10px var(--neon-green);
167
+ }
168
+
169
+ .neon-button {
170
+ transition: all 0.3s ease;
171
+ border: 1px solid;
172
+ }
173
+
174
+ .neon-button:hover {
175
+ transform: translateY(-2px);
176
+ box-shadow: 0 5px 15px rgba(0, 255, 157, 0.4);
177
+ }
178
+
179
+ .neon-button-pink {
180
+ border-color: var(--neon-pink);
181
+ color: var(--neon-pink);
182
+ }
183
+
184
+ .neon-button-pink:hover {
185
+ background-color: rgba(255, 42, 109, 0.2);
186
+ }
187
+
188
+ .neon-button-blue {
189
+ border-color: var(--neon-blue);
190
+ color: var(--neon-blue);
191
+ }
192
+
193
+ .neon-button-blue:hover {
194
+ background-color: rgba(5, 217, 232, 0.2);
195
+ }
196
+
197
+ .neon-button-green {
198
+ border-color: var(--neon-green);
199
+ color: var(--neon-green);
200
+ }
201
+
202
+ .neon-button-green:hover {
203
+ background-color: rgba(0, 255, 157, 0.2);
204
+ }
205
+
206
+ .neon-tab {
207
+ border-bottom: 3px solid transparent;
208
+ transition: all 0.3s ease;
209
+ }
210
+
211
+ .neon-tab:hover, .neon-tab.active {
212
+ border-bottom-color: var(--neon-blue);
213
+ color: var(--neon-blue);
214
+ }
215
+
216
+ .notification-dot {
217
+ width: 8px;
218
+ height: 8px;
219
+ border-radius: 50%;
220
+ background-color: var(--neon-pink);
221
+ box-shadow: 0 0 5px var(--neon-pink);
222
+ animation: pulse 1.5s infinite;
223
+ }
224
+
225
+ .avatar-ring {
226
+ border: 2px solid var(--neon-blue);
227
+ box-shadow: 0 0 10px var(--neon-blue);
228
+ }
229
+
230
+ .sidebar-item {
231
+ transition: all 0.3s ease;
232
+ border-left: 3px solid transparent;
233
+ }
234
+
235
+ .sidebar-item:hover, .sidebar-item.active {
236
+ border-left-color: var(--neon-purple);
237
+ background-color: rgba(211, 0, 197, 0.1);
238
+ }
239
+
240
+ .sidebar-item .icon {
241
+ transition: all 0.3s ease;
242
+ }
243
+
244
+ .sidebar-item:hover .icon, .sidebar-item.active .icon {
245
+ transform: scale(1.2);
246
+ color: var(--neon-purple);
247
+ }
248
+
249
+ .scrollbar-hide::-webkit-scrollbar {
250
+ display: none;
251
+ }
252
+
253
+ .scrollbar-hide {
254
+ -ms-overflow-style: none;
255
+ scrollbar-width: none;
256
+ }
257
+ </style>
258
+ </head>
259
+ <body class="min-h-screen flex flex-col">
260
+ <!-- Top Navigation Bar -->
261
+ <header class="bg-black bg-opacity-50 backdrop-blur-md border-b border-gray-800 neon-border-blue p-4">
262
+ <div class="container mx-auto flex justify-between items-center">
263
+ <div class="flex items-center space-x-4">
264
+ <div class="neon-text-pink title-font text-2xl flex items-center">
265
+ <i class="fas fa-envelope mr-2"></i>
266
+ <span>NeonMail</span>
267
+ <span class="text-xs neon-text-blue ml-1">2035</span>
268
+ </div>
269
+
270
+ <div class="relative hidden md:block">
271
+ <input type="text" placeholder="Search across the multiverse..."
272
+ class="neon-input px-4 py-2 rounded-full w-64 focus:w-80 transition-all duration-300">
273
+ <i class="fas fa-search neon-text-blue absolute right-3 top-2.5"></i>
274
+ </div>
275
+ </div>
276
+
277
+ <div class="flex items-center space-x-6">
278
+ <button class="neon-button neon-button-blue px-4 py-2 rounded-full flex items-center">
279
+ <i class="fas fa-plus mr-2"></i>
280
+ <span>New Message</span>
281
+ </button>
282
+
283
+ <div class="relative">
284
+ <div class="avatar-ring w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center cursor-pointer">
285
+ <i class="fas fa-user neon-text-blue"></i>
286
+ </div>
287
+ <div class="notification-dot absolute top-0 right-0"></div>
288
+ </div>
289
+ </div>
290
+ </div>
291
+ </header>
292
+
293
+ <!-- Main Content Area -->
294
+ <div class="flex flex-1 overflow-hidden">
295
+ <!-- Sidebar -->
296
+ <aside class="w-16 md:w-64 bg-black bg-opacity-30 border-r border-gray-800 neon-border-purple flex flex-col">
297
+ <div class="p-4 flex flex-col space-y-6">
298
+ <div class="sidebar-item active p-3 rounded-lg flex items-center cursor-pointer">
299
+ <i class="fas fa-inbox icon neon-text-pink text-xl md:mr-3"></i>
300
+ <span class="hidden md:block neon-text-pink">Inbox</span>
301
+ <span class="hidden md:block ml-auto neon-text-blue">1.2k</span>
302
+ </div>
303
+
304
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
305
+ <i class="fas fa-star icon neon-text-yellow text-xl md:mr-3"></i>
306
+ <span class="hidden md:block">Starred</span>
307
+ <span class="hidden md:block ml-auto text-gray-400">42</span>
308
+ </div>
309
+
310
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
311
+ <i class="fas fa-paper-plane icon neon-text-blue text-xl md:mr-3"></i>
312
+ <span class="hidden md:block">Sent</span>
313
+ </div>
314
+
315
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
316
+ <i class="fas fa-file-alt icon neon-text-green text-xl md:mr-3"></i>
317
+ <span class="hidden md:block">Drafts</span>
318
+ <span class="hidden md:block ml-auto text-gray-400">12</span>
319
+ </div>
320
+
321
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
322
+ <i class="fas fa-trash icon text-xl md:mr-3"></i>
323
+ <span class="hidden md:block">Trash</span>
324
+ </div>
325
+
326
+ <div class="pt-6 border-t border-gray-800 neon-border-green hidden md:block">
327
+ <h3 class="neon-text-purple uppercase text-xs font-bold mb-3">Smart Folders</h3>
328
+
329
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
330
+ <i class="fas fa-bolt icon neon-text-yellow text-sm mr-3"></i>
331
+ <span>High Priority</span>
332
+ <span class="ml-auto text-gray-400">87</span>
333
+ </div>
334
+
335
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
336
+ <i class="fas fa-users icon neon-text-blue text-sm mr-3"></i>
337
+ <span>Team</span>
338
+ </div>
339
+
340
+ <div class="sidebar-item p-3 rounded-lg flex items-center cursor-pointer">
341
+ <i class="fas fa-shopping-cart icon neon-text-green text-sm mr-3"></i>
342
+ <span>Purchases</span>
343
+ <span class="ml-auto text-gray-400">24</span>
344
+ </div>
345
+ </div>
346
+ </div>
347
+
348
+ <div class="mt-auto p-4 neon-bg-blue rounded-t-lg">
349
+ <div class="flex items-center justify-between">
350
+ <div class="flex items-center">
351
+ <div class="w-3 h-3 rounded-full bg-green-500 mr-2"></div>
352
+ <span class="text-xs neon-text-blue">Quantum Sync</span>
353
+ </div>
354
+ <span class="text-xs">v9.4.2</span>
355
+ </div>
356
+ <div class="mt-2 text-xs text-gray-400">Last sync: 12:47:23</div>
357
+ </div>
358
+ </aside>
359
+
360
+ <!-- Email List -->
361
+ <div class="flex-1 flex flex-col border-r border-gray-800 neon-border-green overflow-hidden">
362
+ <div class="p-4 border-b border-gray-800 neon-border-pink flex justify-between items-center">
363
+ <div class="flex space-x-4">
364
+ <div class="neon-tab active">Primary</div>
365
+ <div class="neon-tab">Social</div>
366
+ <div class="neon-tab">Promotions</div>
367
+ </div>
368
+
369
+ <div class="flex items-center space-x-4">
370
+ <button class="neon-button neon-button-green px-3 py-1 rounded-full text-sm">
371
+ <i class="fas fa-sync-alt mr-1"></i>
372
+ <span class="hidden md:inline">Refresh</span>
373
+ </button>
374
+
375
+ <div class="relative">
376
+ <button class="neon-button neon-button-blue px-3 py-1 rounded-full text-sm">
377
+ <i class="fas fa-filter mr-1"></i>
378
+ <span class="hidden md:inline">Filter</span>
379
+ </button>
380
+ <div class="notification-dot absolute top-0 right-0"></div>
381
+ </div>
382
+ </div>
383
+ </div>
384
+
385
+ <div class="overflow-y-auto scrollbar-hide flex-1">
386
+ <!-- Email Item -->
387
+ <div class="message-preview unread p-4 border-b border-gray-800 cursor-pointer neon-bg-pink">
388
+ <div class="flex items-start">
389
+ <div class="w-10 h-10 rounded-full bg-purple-900 flex items-center justify-center mr-4 neon-border-purple">
390
+ <i class="fas fa-user-astronaut neon-text-purple"></i>
391
+ </div>
392
+ <div class="flex-1 min-w-0">
393
+ <div class="flex justify-between items-baseline">
394
+ <h3 class="font-bold truncate neon-text-blue">Quantum Computing Division</h3>
395
+ <span class="text-xs neon-text-yellow">12:47 PM</span>
396
+ </div>
397
+ <p class="font-bold truncate">Your Qubit Allocation Request Has Been Approved</p>
398
+ <p class="text-sm text-gray-400 truncate">Congratulations! Your request for 128 qubits on the Orion-9 quantum cluster has been approved. Access will be granted starting tomorrow at 08:00 UTC.</p>
399
+ <div class="flex mt-2 space-x-2">
400
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-blue">Priority</span>
401
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-purple">Quantum</span>
402
+ </div>
403
+ </div>
404
+ </div>
405
+ </div>
406
+
407
+ <!-- Email Item -->
408
+ <div class="message-preview important p-4 border-b border-gray-800 cursor-pointer">
409
+ <div class="flex items-start">
410
+ <div class="w-10 h-10 rounded-full bg-yellow-900 flex items-center justify-center mr-4 neon-border-yellow">
411
+ <i class="fas fa-exclamation neon-text-yellow"></i>
412
+ </div>
413
+ <div class="flex-1 min-w-0">
414
+ <div class="flex justify-between items-baseline">
415
+ <h3 class="font-bold truncate">Security Alert System</h3>
416
+ <span class="text-xs text-gray-400">Today, 10:23 AM</span>
417
+ </div>
418
+ <p class="font-bold truncate">Unauthorized Access Attempt Detected</p>
419
+ <p class="text-sm text-gray-400 truncate">Our systems detected an unauthorized attempt to access your neural interface from an unknown location. Please verify your security settings immediately.</p>
420
+ <div class="flex mt-2 space-x-2">
421
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-pink">Security</span>
422
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-yellow">Urgent</span>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+
428
+ <!-- Email Item -->
429
+ <div class="message-preview p-4 border-b border-gray-800 cursor-pointer">
430
+ <div class="flex items-start">
431
+ <div class="w-10 h-10 rounded-full bg-blue-900 flex items-center justify-center mr-4 neon-border-blue">
432
+ <i class="fas fa-calendar-alt neon-text-blue"></i>
433
+ </div>
434
+ <div class="flex-1 min-w-0">
435
+ <div class="flex justify-between items-baseline">
436
+ <h3 class="font-bold truncate">Mars Colony Events</h3>
437
+ <span class="text-xs text-gray-400">Yesterday, 4:12 PM</span>
438
+ </div>
439
+ <p class="font-bold truncate">Weekly Anti-Gravity Yoga Session</p>
440
+ <p class="text-sm text-gray-400 truncate">Join us this Friday at the Olympus Mons Recreation Dome for our weekly anti-gravity yoga session. Mats and inertial dampeners provided.</p>
441
+ <div class="flex mt-2 space-x-2">
442
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-green">Event</span>
443
+ </div>
444
+ </div>
445
+ </div>
446
+ </div>
447
+
448
+ <!-- Email Item -->
449
+ <div class="message-preview flagged p-4 border-b border-gray-800 cursor-pointer">
450
+ <div class="flex items-start">
451
+ <div class="w-10 h-10 rounded-full bg-pink-900 flex items-center justify-center mr-4 neon-border-pink">
452
+ <i class="fas fa-heart neon-text-pink"></i>
453
+ </div>
454
+ <div class="flex-1 min-w-0">
455
+ <div class="flex justify-between items-baseline">
456
+ <h3 class="font-bold truncate">Neural Dating Network</h3>
457
+ <span class="text-xs text-gray-400">Yesterday, 11:47 AM</span>
458
+ </div>
459
+ <p class="font-bold truncate">3 New Compatibility Matches</p>
460
+ <p class="text-sm text-gray-400 truncate">Based on your neural activity patterns, we've found 3 new potential matches with 89%+ compatibility. Tap to view their holographic profiles.</p>
461
+ <div class="flex mt-2 space-x-2">
462
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-purple">Dating</span>
463
+ </div>
464
+ </div>
465
+ </div>
466
+ </div>
467
+
468
+ <!-- Email Item -->
469
+ <div class="message-preview p-4 border-b border-gray-800 cursor-pointer">
470
+ <div class="flex items-start">
471
+ <div class="w-10 h-10 rounded-full bg-green-900 flex items-center justify-center mr-4 neon-border-green">
472
+ <i class="fas fa-shopping-cart neon-text-green"></i>
473
+ </div>
474
+ <div class="flex-1 min-w-0">
475
+ <div class="flex justify-between items-baseline">
476
+ <h3 class="font-bold truncate">Orbital Delivery Express</h3>
477
+ <span class="text-xs text-gray-400">Tue, 9:32 AM</span>
478
+ </div>
479
+ <p class="font-bold truncate">Your Package Has Entered Earth's Atmosphere</p>
480
+ <p class="text-sm text-gray-400 truncate">Your order #QE-2049-772 (1x Personal Hoverboard) has cleared customs and will be delivered via drone within the next 47 minutes.</p>
481
+ <div class="flex mt-2 space-x-2">
482
+ <span class="text-xs px-2 py-1 rounded-full neon-bg-blue">Shipping</span>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+
488
+ <!-- Email Item -->
489
+ <div class="message-preview p-4 border-b border-gray-800 cursor-pointer">
490
+ <div class="flex items-start">
491
+ <div class="w-10 h-10 rounded-full bg-gray-700 flex items-center justify-center mr-4">
492
+ <i class="fas fa-newspaper"></i>
493
+ </div>
494
+ <div class="flex-1 min-w-0">
495
+ <div class="flex justify-between items-baseline">
496
+ <h3 class="font-bold truncate">Galactic News Network</h3>
497
+ <span class="text-xs text-gray-400">Mon, 6:14 PM</span>
498
+ </div>
499
+ <p class="font-bold truncate">Breaking: First Successful Teleportation of Living Organism</p>
500
+ <p class="text-sm text-gray-400 truncate">Scientists at the Alpha Centauri Research Station have successfully teleported a live specimen of the newly discovered Xenomorph butterfly across 3 light years.</p>
501
+ <div class="flex mt-2 space-x-2">
502
+ <span class="text-xs px-2 py-1 rounded-full bg-gray-800">News</span>
503
+ </div>
504
+ </div>
505
+ </div>
506
+ </div>
507
+ </div>
508
+ </div>
509
+
510
+ <!-- Email Content -->
511
+ <div class="hidden lg:flex flex-col w-1/2 xl:w-2/5 border-l border-gray-800 neon-border-yellow">
512
+ <div class="p-4 border-b border-gray-800 flex justify-between items-center neon-bg-purple">
513
+ <h2 class="neon-text-purple title-font text-xl">Message</h2>
514
+ <div class="flex space-x-3">
515
+ <button class="neon-button neon-button-blue p-2 rounded-full">
516
+ <i class="fas fa-reply"></i>
517
+ </button>
518
+ <button class="neon-button neon-button-green p-2 rounded-full">
519
+ <i class="fas fa-share"></i>
520
+ </button>
521
+ <button class="neon-button neon-button-pink p-2 rounded-full">
522
+ <i class="fas fa-trash"></i>
523
+ </button>
524
+ </div>
525
+ </div>
526
+
527
+ <div class="p-6 overflow-y-auto flex-1 scanline">
528
+ <div class="mb-8">
529
+ <h1 class="neon-text-blue title-font text-2xl mb-4">Your Qubit Allocation Request Has Been Approved</h1>
530
+
531
+ <div class="flex items-center justify-between mb-6">
532
+ <div class="flex items-center">
533
+ <div class="w-12 h-12 rounded-full bg-purple-900 flex items-center justify-center mr-4 neon-border-purple">
534
+ <i class="fas fa-user-astronaut neon-text-purple text-xl"></i>
535
+ </div>
536
+ <div>
537
+ <p class="font-bold neon-text-blue">Quantum Computing Division</p>
538
+ <p class="text-sm text-gray-400">[email protected]</p>
539
+ </div>
540
+ </div>
541
+ <div class="text-sm neon-text-yellow">12:47 PM • Today</div>
542
+ </div>
543
+ </div>
544
+
545
+ <div class="prose prose-invert max-w-none">
546
+ <p class="mb-4">Dear Quantum Researcher,</p>
547
+
548
+ <p class="mb-4">We are pleased to inform you that your request for quantum computing resources has been approved by the Orion Allocation Committee.</p>
549
+
550
+ <div class="neon-bg-blue p-4 rounded-lg mb-6">
551
+ <h3 class="neon-text-blue font-bold mb-2">Allocation Details:</h3>
552
+ <ul class="list-disc pl-5 space-y-1">
553
+ <li><span class="font-bold">Qubits:</span> 128 logical qubits</li>
554
+ <li><span class="font-bold">Cluster:</span> Orion-9 (7th generation photonic)</li>
555
+ <li><span class="font-bold">Time Slot:</span> 08:00 - 20:00 UTC daily</li>
556
+ <li><span class="font-bold">Duration:</span> 14 Earth days (extendable)</li>
557
+ <li><span class="font-bold">Coherence Time:</span> 450µs (guaranteed)</li>
558
+ </ul>
559
+ </div>
560
+
561
+ <p class="mb-4">Your project "<span class="neon-text-green">Topological Quantum Memory Optimization</span>" has been prioritized due to its potential impact on our quantum networking infrastructure.</p>
562
+
563
+ <p class="mb-4">Access credentials and connection protocols have been attached to this message. Please ensure you've completed the mandatory Quantum Safety Certification (QSC-9) before your first session.</p>
564
+
565
+ <div class="neon-bg-pink p-4 rounded-lg mb-6">
566
+ <h3 class="neon-text-pink font-bold mb-2">Important Notes:</h3>
567
+ <ul class="list-disc pl-5 space-y-1">
568
+ <li>The Orion-9 cluster operates at 0.008°K - ensure your cryogenic protocols are active before connecting</li>
569
+ <li>All quantum algorithms must be submitted for decoherence validation at least 6 hours before execution</li>
570
+ <li>Any detected quantum entanglement with unauthorized systems will result in immediate termination of your allocation</li>
571
+ </ul>
572
+ </div>
573
+
574
+ <p class="mb-4">We look forward to seeing the results of your research. Should you require any assistance, our Quantum Support Team is available 24/7 via neural link or through the Quantum Console in your dashboard.</p>
575
+
576
+ <p class="mb-4 neon-text-blue">For the future of quantum computing,</p>
577
+
578
+ <p class="font-bold neon-text-purple">Dr. Elara Voss</p>
579
+ <p class="text-sm">Director, Quantum Resource Allocation</p>
580
+ <p class="text-sm neon-text-blue">NeonCorp Quantum Division</p>
581
+ </div>
582
+
583
+ <div class="mt-8 pt-6 border-t border-gray-800 neon-border-green">
584
+ <h3 class="neon-text-green font-bold mb-4">Attachments (2)</h3>
585
+
586
+ <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
587
+ <div class="neon-bg-purple p-3 rounded-lg flex items-center cursor-pointer glow-on-hover">
588
+ <div class="w-12 h-12 rounded-lg bg-purple-900 flex items-center justify-center mr-3 neon-border-purple">
589
+ <i class="fas fa-key neon-text-purple"></i>
590
+ </div>
591
+ <div>
592
+ <p class="font-bold truncate">Orion-9_Access_Credentials.qkey</p>
593
+ <p class="text-xs text-gray-400">12.4 KB • Quantum Encrypted</p>
594
+ </div>
595
+ </div>
596
+
597
+ <div class="neon-bg-blue p-3 rounded-lg flex items-center cursor-pointer glow-on-hover">
598
+ <div class="w-12 h-12 rounded-lg bg-blue-900 flex items-center justify-center mr-3 neon-border-blue">
599
+ <i class="fas fa-book neon-text-blue"></i>
600
+ </div>
601
+ <div>
602
+ <p class="font-bold truncate">Orion-9_Protocol_Handbook.pdf</p>
603
+ <p class="text-xs text-gray-400">4.7 MB • 128 pages</p>
604
+ </div>
605
+ </div>
606
+ </div>
607
+ </div>
608
+ </div>
609
+
610
+ <div class="p-4 border-t border-gray-800 neon-border-pink">
611
+ <div class="flex space-x-3">
612
+ <button class="neon-button neon-button-green flex-1 py-3 rounded-lg flex items-center justify-center">
613
+ <i class="fas fa-reply mr-2"></i>
614
+ <span>Reply</span>
615
+ </button>
616
+ <button class="neon-button neon-button-blue flex-1 py-3 rounded-lg flex items-center justify-center">
617
+ <i class="fas fa-share mr-2"></i>
618
+ <span>Forward</span>
619
+ </button>
620
+ </div>
621
+ </div>
622
+ </div>
623
+ </div>
624
+
625
+ <!-- Mobile Compose Button -->
626
+ <div class="lg:hidden fixed bottom-6 right-6">
627
+ <button class="neon-button neon-button-pink w-14 h-14 rounded-full text-2xl flex items-center justify-center shadow-lg">
628
+ <i class="fas fa-plus"></i>
629
+ </button>
630
+ </div>
631
+
632
+ <!-- Status Bar -->
633
+ <footer class="bg-black bg-opacity-50 border-t border-gray-800 neon-border-blue p-2 text-xs flex justify-between items-center">
634
+ <div class="flex items-center space-x-4">
635
+ <div class="flex items-center neon-text-green">
636
+ <i class="fas fa-shield-alt mr-1"></i>
637
+ <span>Quantum Encryption Active</span>
638
+ </div>
639
+ <div class="hidden md:flex items-center">
640
+ <i class="fas fa-satellite-dish mr-1 neon-text-blue"></i>
641
+ <span>Neural Uplink: 12.7Gbps</span>
642
+ </div>
643
+ </div>
644
+
645
+ <div class="flex items-center space-x-4">
646
+ <div class="flex items-center">
647
+ <i class="fas fa-battery-three-quarters mr-1 neon-text-yellow"></i>
648
+ <span>78%</span>
649
+ </div>
650
+ <div class="hidden sm:flex items-center">
651
+ <i class="fas fa-cloud mr-1 neon-text-purple"></i>
652
+ <span>Orion-9 Cluster • 128Q Online</span>
653
+ </div>
654
+ <div class="neon-text-blue">
655
+ <span>Earth Standard Time: </span>
656
+ <span id="datetime" class="font-mono">Loading...</span>
657
+ </div>
658
+ </div>
659
+ </footer>
660
+
661
+ <script>
662
+ // Update datetime
663
+ function updateDateTime() {
664
+ const now = new Date();
665
+ const dateStr = now.toLocaleDateString('en-US', {
666
+ year: 'numeric',
667
+ month: 'short',
668
+ day: 'numeric',
669
+ timeZone: 'UTC'
670
+ });
671
+ const timeStr = now.toLocaleTimeString('en-US', {
672
+ hour12: false,
673
+ hour: '2-digit',
674
+ minute: '2-digit',
675
+ second: '2-digit',
676
+ timeZone: 'UTC'
677
+ });
678
+ document.getElementById('datetime').textContent = `${dateStr} • ${timeStr} UTC`;
679
+ }
680
+
681
+ updateDateTime();
682
+ setInterval(updateDateTime, 1000);
683
+
684
+ // Add hover effects to message previews
685
+ document.querySelectorAll('.message-preview').forEach(preview => {
686
+ preview.addEventListener('mouseenter', function() {
687
+ this.classList.add('glow-on-hover');
688
+ });
689
+
690
+ preview.addEventListener('mouseleave', function() {
691
+ this.classList.remove('glow-on-hover');
692
+ });
693
+ });
694
+
695
+ // Tab switching functionality
696
+ document.querySelectorAll('.neon-tab').forEach(tab => {
697
+ tab.addEventListener('click', function() {
698
+ document.querySelectorAll('.neon-tab').forEach(t => t.classList.remove('active'));
699
+ this.classList.add('active');
700
+ });
701
+ });
702
+
703
+ // Sidebar item switching
704
+ document.querySelectorAll('.sidebar-item').forEach(item => {
705
+ item.addEventListener('click', function() {
706
+ document.querySelectorAll('.sidebar-item').forEach(i => i.classList.remove('active'));
707
+ this.classList.add('active');
708
+ });
709
+ });
710
+ </script>
711
+ <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=molonelaveh/email-client" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
712
+ </html>