@howssatoshi/quantumcss 1.5.1 → 1.6.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/quantum.min.css +1 -4885
- package/examples/admin-panel.html +834 -0
- package/examples/analytics-dashboard.html +949 -0
- package/examples/chat-messaging.html +264 -0
- package/examples/email-template.html +697 -0
- package/examples/index.html +129 -1
- package/examples/music-streaming.html +1239 -0
- package/examples/portfolio-resume.html +653 -0
- package/examples/starlight.html +56 -3
- package/examples/travel/index.html +0 -4
- package/examples/video-streaming.html +564 -0
- package/package.json +1 -1
- package/src/styles/quantum-base.css +1 -1
- package/src/styles/quantum-components.css +954 -0
|
@@ -0,0 +1,697 @@
|
|
|
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>Starlight Mail - Modern Email Client</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../src/styles/quantum-components.css">
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
/* Email Client Layout */
|
|
12
|
+
.email-layout {
|
|
13
|
+
display: grid;
|
|
14
|
+
grid-template-columns: 280px 1fr;
|
|
15
|
+
min-height: 100vh;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.email-sidebar {
|
|
19
|
+
background: linear-gradient(180deg, rgba(8, 8, 26, 0.98) 0%, rgba(15, 23, 42, 0.98) 100%);
|
|
20
|
+
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
|
21
|
+
display: flex;
|
|
22
|
+
flex-direction: column;
|
|
23
|
+
padding: 1.5rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.email-main {
|
|
27
|
+
display: grid;
|
|
28
|
+
grid-template-columns: 380px 1fr;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.email-list {
|
|
33
|
+
border-right: 1px solid rgba(255, 255, 255, 0.1);
|
|
34
|
+
overflow-y: auto;
|
|
35
|
+
max-height: 100vh;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.email-content {
|
|
39
|
+
overflow-y: auto;
|
|
40
|
+
max-height: 100vh;
|
|
41
|
+
padding: 2rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* Email List Items */
|
|
45
|
+
.email-item {
|
|
46
|
+
padding: 1rem 1.5rem;
|
|
47
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
|
48
|
+
cursor: pointer;
|
|
49
|
+
transition: all 0.2s ease;
|
|
50
|
+
position: relative;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.email-item:hover {
|
|
54
|
+
background: rgba(255, 255, 255, 0.03);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.email-item.active {
|
|
58
|
+
background: rgba(0, 212, 255, 0.08);
|
|
59
|
+
border-left: 3px solid var(--color-starlight, #00d4ff);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.email-item.unread {
|
|
63
|
+
background: rgba(0, 212, 255, 0.04);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.email-item.unread .email-sender,
|
|
67
|
+
.email-item.unread .email-subject {
|
|
68
|
+
font-weight: 600;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.email-sender {
|
|
72
|
+
font-size: 0.875rem;
|
|
73
|
+
color: #f1f5f9;
|
|
74
|
+
margin-bottom: 0.25rem;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.email-preview {
|
|
78
|
+
font-size: 0.8125rem;
|
|
79
|
+
color: #94a3b8;
|
|
80
|
+
white-space: nowrap;
|
|
81
|
+
overflow: hidden;
|
|
82
|
+
text-overflow: ellipsis;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.email-meta {
|
|
86
|
+
display: flex;
|
|
87
|
+
justify-content: space-between;
|
|
88
|
+
align-items: center;
|
|
89
|
+
margin-bottom: 0.25rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.email-time {
|
|
93
|
+
font-size: 0.75rem;
|
|
94
|
+
color: #64748b;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* Compose Button */
|
|
98
|
+
.compose-btn {
|
|
99
|
+
background: linear-gradient(135deg, #00d4ff 0%, #3b82f6 100%);
|
|
100
|
+
color: white;
|
|
101
|
+
border: none;
|
|
102
|
+
padding: 0.875rem 1.5rem;
|
|
103
|
+
border-radius: 0.75rem;
|
|
104
|
+
font-weight: 600;
|
|
105
|
+
cursor: pointer;
|
|
106
|
+
transition: all 0.3s ease;
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
gap: 0.5rem;
|
|
111
|
+
margin-bottom: 1.5rem;
|
|
112
|
+
box-shadow: 0 4px 15px rgba(0, 212, 255, 0.3);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.compose-btn:hover {
|
|
116
|
+
transform: translateY(-2px);
|
|
117
|
+
box-shadow: 0 6px 20px rgba(0, 212, 255, 0.4);
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
/* Email Header */
|
|
121
|
+
.email-header {
|
|
122
|
+
display: flex;
|
|
123
|
+
justify-content: space-between;
|
|
124
|
+
align-items: flex-start;
|
|
125
|
+
margin-bottom: 2rem;
|
|
126
|
+
padding-bottom: 1.5rem;
|
|
127
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
128
|
+
}
|
|
129
|
+
|
|
130
|
+
.email-actions {
|
|
131
|
+
display: flex;
|
|
132
|
+
gap: 0.5rem;
|
|
133
|
+
}
|
|
134
|
+
|
|
135
|
+
/* Avatar sizes for email */
|
|
136
|
+
.avatar-lg {
|
|
137
|
+
width: 48px;
|
|
138
|
+
height: 48px;
|
|
139
|
+
font-size: 1rem;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
/* User Profile section */
|
|
143
|
+
.user-profile-section {
|
|
144
|
+
display: flex;
|
|
145
|
+
align-items: center;
|
|
146
|
+
gap: 0.75rem;
|
|
147
|
+
padding: 1rem;
|
|
148
|
+
margin-top: auto;
|
|
149
|
+
background: rgba(255, 255, 255, 0.03);
|
|
150
|
+
border-radius: 0.75rem;
|
|
151
|
+
border: 1px solid rgba(255, 255, 255, 0.05);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
/* Sun/Moon icons */
|
|
155
|
+
.sun-icon { display: none; }
|
|
156
|
+
body.light-mode .sun-icon { display: block; }
|
|
157
|
+
body.light-mode .moon-icon { display: none; }
|
|
158
|
+
|
|
159
|
+
/* Light Mode Overrides */
|
|
160
|
+
body.light-mode {
|
|
161
|
+
background-color: #f8fafc;
|
|
162
|
+
color: #1e293b;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
body.light-mode .email-sidebar {
|
|
166
|
+
background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
|
|
167
|
+
border-right-color: #e2e8f0;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
body.light-mode .email-list {
|
|
171
|
+
background: #ffffff;
|
|
172
|
+
border-right-color: #e2e8f0;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
body.light-mode .email-content {
|
|
176
|
+
background: #f8fafc;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
body.light-mode .email-item {
|
|
180
|
+
border-bottom-color: #f1f5f9;
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
body.light-mode .email-item:hover {
|
|
184
|
+
background: #f8fafc;
|
|
185
|
+
}
|
|
186
|
+
|
|
187
|
+
body.light-mode .email-item.active {
|
|
188
|
+
background: rgba(0, 212, 255, 0.08);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
body.light-mode .email-item.unread {
|
|
192
|
+
background: rgba(59, 130, 246, 0.04);
|
|
193
|
+
}
|
|
194
|
+
|
|
195
|
+
body.light-mode .email-sender {
|
|
196
|
+
color: #0f172a;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
body.light-mode .email-preview {
|
|
200
|
+
color: #64748b;
|
|
201
|
+
}
|
|
202
|
+
|
|
203
|
+
body.light-mode .email-time {
|
|
204
|
+
color: #94a3b8;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
body.light-mode .user-profile-section {
|
|
208
|
+
background: #f1f5f9;
|
|
209
|
+
border-color: #e2e8f0;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
body.light-mode .user-name {
|
|
213
|
+
color: #0f172a;
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/* Responsive */
|
|
217
|
+
@media (max-width: 1024px) {
|
|
218
|
+
.email-layout {
|
|
219
|
+
grid-template-columns: 240px 1fr;
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.email-main {
|
|
223
|
+
grid-template-columns: 320px 1fr;
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
@media (max-width: 768px) {
|
|
228
|
+
.email-layout {
|
|
229
|
+
grid-template-columns: 1fr;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.email-sidebar {
|
|
233
|
+
display: none;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.email-main {
|
|
237
|
+
grid-template-columns: 1fr;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
.email-list {
|
|
241
|
+
border-right: none;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.email-content {
|
|
245
|
+
display: none;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.email-content.mobile-visible {
|
|
249
|
+
display: block;
|
|
250
|
+
position: fixed;
|
|
251
|
+
top: 0;
|
|
252
|
+
left: 0;
|
|
253
|
+
right: 0;
|
|
254
|
+
bottom: 0;
|
|
255
|
+
z-index: 100;
|
|
256
|
+
background: inherit;
|
|
257
|
+
}
|
|
258
|
+
}
|
|
259
|
+
|
|
260
|
+
/* Header area */
|
|
261
|
+
.top-bar {
|
|
262
|
+
display: flex;
|
|
263
|
+
justify-content: space-between;
|
|
264
|
+
align-items: center;
|
|
265
|
+
padding: 1rem 1.5rem;
|
|
266
|
+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
|
267
|
+
background: rgba(8, 8, 26, 0.5);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
body.light-mode .top-bar {
|
|
271
|
+
background: #ffffff;
|
|
272
|
+
border-bottom-color: #e2e8f0;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.email-subject {
|
|
276
|
+
font-size: 1.5rem;
|
|
277
|
+
font-weight: 700;
|
|
278
|
+
color: #f1f5f9;
|
|
279
|
+
margin-bottom: 1rem;
|
|
280
|
+
line-height: 1.3;
|
|
281
|
+
}
|
|
282
|
+
|
|
283
|
+
body.light-mode .email-subject {
|
|
284
|
+
color: #0f172a;
|
|
285
|
+
}
|
|
286
|
+
|
|
287
|
+
.email-body {
|
|
288
|
+
color: #cbd5e1;
|
|
289
|
+
line-height: 1.7;
|
|
290
|
+
font-size: 0.9375rem;
|
|
291
|
+
}
|
|
292
|
+
|
|
293
|
+
body.light-mode .email-body {
|
|
294
|
+
color: #475569;
|
|
295
|
+
}
|
|
296
|
+
|
|
297
|
+
.email-body p {
|
|
298
|
+
margin-bottom: 1rem;
|
|
299
|
+
}
|
|
300
|
+
|
|
301
|
+
.email-sender-info {
|
|
302
|
+
display: flex;
|
|
303
|
+
align-items: center;
|
|
304
|
+
gap: 1rem;
|
|
305
|
+
margin-bottom: 1.5rem;
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
.sender-details h3 {
|
|
309
|
+
font-weight: 600;
|
|
310
|
+
color: #f1f5f9;
|
|
311
|
+
margin-bottom: 0.25rem;
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
body.light-mode .sender-details h3 {
|
|
315
|
+
color: #0f172a;
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
.sender-details p {
|
|
319
|
+
font-size: 0.875rem;
|
|
320
|
+
color: #64748b;
|
|
321
|
+
}
|
|
322
|
+
</style>
|
|
323
|
+
</head>
|
|
324
|
+
<body class="bg-starlight-deep text-primary font-sans antialiased">
|
|
325
|
+
<div class="email-layout">
|
|
326
|
+
<!-- Sidebar -->
|
|
327
|
+
<aside class="email-sidebar">
|
|
328
|
+
<div class="flex items-center gap-3 mb-8">
|
|
329
|
+
<div class="w-10 h-10 rounded-xl bg-gradient-to-br from-starlight to-blue-500 flex items-center justify-center">
|
|
330
|
+
<svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
331
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
|
|
332
|
+
</svg>
|
|
333
|
+
</div>
|
|
334
|
+
<span class="text-xl font-bold text-gradient-starlight">Starlight Mail</span>
|
|
335
|
+
</div>
|
|
336
|
+
|
|
337
|
+
<button class="compose-btn">
|
|
338
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
339
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
|
|
340
|
+
</svg>
|
|
341
|
+
Compose
|
|
342
|
+
</button>
|
|
343
|
+
|
|
344
|
+
<nav class="space-y-1 mb-6">
|
|
345
|
+
<button class="nav-item active" style="width: 100%;">
|
|
346
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
347
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"></path>
|
|
348
|
+
</svg>
|
|
349
|
+
<span>Inbox</span>
|
|
350
|
+
<span class="nav-badge">12</span>
|
|
351
|
+
</button>
|
|
352
|
+
<button class="nav-item" style="width: 100%;">
|
|
353
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
354
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
|
|
355
|
+
</svg>
|
|
356
|
+
<span>Starred</span>
|
|
357
|
+
</button>
|
|
358
|
+
<button class="nav-item" style="width: 100%;">
|
|
359
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
360
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
|
|
361
|
+
</svg>
|
|
362
|
+
<span>Sent</span>
|
|
363
|
+
</button>
|
|
364
|
+
<button class="nav-item" style="width: 100%;">
|
|
365
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
366
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"></path>
|
|
367
|
+
</svg>
|
|
368
|
+
<span>Drafts</span>
|
|
369
|
+
<span class="nav-badge">3</span>
|
|
370
|
+
</button>
|
|
371
|
+
<button class="nav-item" style="width: 100%;">
|
|
372
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
373
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
|
|
374
|
+
</svg>
|
|
375
|
+
<span>Trash</span>
|
|
376
|
+
</button>
|
|
377
|
+
</nav>
|
|
378
|
+
|
|
379
|
+
<div class="pt-6 border-t border-white/10">
|
|
380
|
+
<h3 class="nav-section-title" style="padding-left: 0.75rem;">Labels</h3>
|
|
381
|
+
<nav class="space-y-1">
|
|
382
|
+
<button class="nav-item" style="width: 100%;">
|
|
383
|
+
<span class="w-3 h-3 rounded-full bg-blue-500"></span>
|
|
384
|
+
<span>Work</span>
|
|
385
|
+
</button>
|
|
386
|
+
<button class="nav-item" style="width: 100%;">
|
|
387
|
+
<span class="w-3 h-3 rounded-full bg-green-500"></span>
|
|
388
|
+
<span>Personal</span>
|
|
389
|
+
</button>
|
|
390
|
+
<button class="nav-item" style="width: 100%;">
|
|
391
|
+
<span class="w-3 h-3 rounded-full bg-red-500"></span>
|
|
392
|
+
<span>Important</span>
|
|
393
|
+
</button>
|
|
394
|
+
</nav>
|
|
395
|
+
</div>
|
|
396
|
+
|
|
397
|
+
<div class="user-profile-section">
|
|
398
|
+
<div class="user-cell" style="flex: 1; min-width: 0;">
|
|
399
|
+
<div class="avatar avatar-lg">JD</div>
|
|
400
|
+
<div class="user-info" style="min-width: 0;">
|
|
401
|
+
<div class="user-name">John Doe</div>
|
|
402
|
+
<div class="user-email" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">john.doe@starlight.dev</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
<button class="icon-btn" onclick="toggleTheme()" title="Toggle Theme" style="flex-shrink: 0;">
|
|
406
|
+
<svg class="w-5 h-5 sun-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
407
|
+
<path d="M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z"></path>
|
|
408
|
+
</svg>
|
|
409
|
+
<svg class="w-5 h-5 moon-icon" fill="currentColor" viewBox="0 0 20 20">
|
|
410
|
+
<path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"></path>
|
|
411
|
+
</svg>
|
|
412
|
+
</button>
|
|
413
|
+
</div>
|
|
414
|
+
</aside>
|
|
415
|
+
|
|
416
|
+
<!-- Main Content -->
|
|
417
|
+
<div class="email-main">
|
|
418
|
+
<!-- Email List -->
|
|
419
|
+
<div class="email-list">
|
|
420
|
+
<div class="top-bar">
|
|
421
|
+
<h2 class="text-lg font-semibold">Inbox</h2>
|
|
422
|
+
<div class="flex gap-2">
|
|
423
|
+
<button class="icon-btn" title="Refresh">
|
|
424
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
425
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
|
|
426
|
+
</svg>
|
|
427
|
+
</button>
|
|
428
|
+
<button class="icon-btn" title="More">
|
|
429
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
430
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z"></path>
|
|
431
|
+
</svg>
|
|
432
|
+
</button>
|
|
433
|
+
</div>
|
|
434
|
+
</div>
|
|
435
|
+
|
|
436
|
+
<div class="search-box px-4 py-3">
|
|
437
|
+
<svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
438
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
|
|
439
|
+
</svg>
|
|
440
|
+
<input type="text" class="search-input search-input-full" placeholder="Search emails...">
|
|
441
|
+
</div>
|
|
442
|
+
|
|
443
|
+
<div class="email-item unread active">
|
|
444
|
+
<div class="email-meta">
|
|
445
|
+
<span class="email-sender">Sarah Chen</span>
|
|
446
|
+
<span class="email-time">10:30 AM</span>
|
|
447
|
+
</div>
|
|
448
|
+
<div class="email-subject text-sm mb-1">Project Update: Q4 Roadmap</div>
|
|
449
|
+
<div class="email-preview">Hi team, I wanted to share the latest updates on our Q4 roadmap and discuss the timeline for...</div>
|
|
450
|
+
<div class="mt-2">
|
|
451
|
+
<span class="label label-work">Work</span>
|
|
452
|
+
</div>
|
|
453
|
+
</div>
|
|
454
|
+
|
|
455
|
+
<div class="email-item unread">
|
|
456
|
+
<div class="email-meta">
|
|
457
|
+
<span class="email-sender">Alex Rivera</span>
|
|
458
|
+
<span class="email-time">9:45 AM</span>
|
|
459
|
+
</div>
|
|
460
|
+
<div class="email-subject text-sm mb-1">Design System Meeting - Tomorrow</div>
|
|
461
|
+
<div class="email-preview">Hey everyone, just a reminder about our design system meeting scheduled for tomorrow at 2 PM...</div>
|
|
462
|
+
<div class="mt-2">
|
|
463
|
+
<span class="label label-work">Work</span>
|
|
464
|
+
<span class="label label-important">Important</span>
|
|
465
|
+
</div>
|
|
466
|
+
</div>
|
|
467
|
+
|
|
468
|
+
<div class="email-item">
|
|
469
|
+
<div class="email-meta">
|
|
470
|
+
<span class="email-sender">Mom</span>
|
|
471
|
+
<span class="email-time">Yesterday</span>
|
|
472
|
+
</div>
|
|
473
|
+
<div class="email-subject text-sm mb-1">Weekend Plans?</div>
|
|
474
|
+
<div class="email-preview">Hi sweetie! Are you coming over for dinner this weekend? Dad is making his famous lasagna...</div>
|
|
475
|
+
<div class="mt-2">
|
|
476
|
+
<span class="label label-personal">Personal</span>
|
|
477
|
+
</div>
|
|
478
|
+
</div>
|
|
479
|
+
|
|
480
|
+
<div class="email-item unread">
|
|
481
|
+
<div class="email-meta">
|
|
482
|
+
<span class="email-sender">GitHub</span>
|
|
483
|
+
<span class="email-time">Yesterday</span>
|
|
484
|
+
</div>
|
|
485
|
+
<div class="email-subject text-sm mb-1">Security alert for your repository</div>
|
|
486
|
+
<div class="email-preview">We noticed a new sign-in to your GitHub account from a device we don't recognize...</div>
|
|
487
|
+
</div>
|
|
488
|
+
|
|
489
|
+
<div class="email-item">
|
|
490
|
+
<div class="email-meta">
|
|
491
|
+
<span class="email-sender">Marketing Team</span>
|
|
492
|
+
<span class="email-time">Yesterday</span>
|
|
493
|
+
</div>
|
|
494
|
+
<div class="email-subject text-sm mb-1">Campaign Performance Report</div>
|
|
495
|
+
<div class="email-preview">Please find attached the performance report for last month's marketing campaign. The results show...</div>
|
|
496
|
+
<div class="mt-2">
|
|
497
|
+
<span class="label label-work">Work</span>
|
|
498
|
+
</div>
|
|
499
|
+
</div>
|
|
500
|
+
|
|
501
|
+
<div class="email-item">
|
|
502
|
+
<div class="email-meta">
|
|
503
|
+
<span class="email-sender">Spotify</span>
|
|
504
|
+
<span class="email-time">2 days ago</span>
|
|
505
|
+
</div>
|
|
506
|
+
<div class="email-subject text-sm mb-1">Your 2024 Wrapped is here!</div>
|
|
507
|
+
<div class="email-preview">Discover your year in music. From your most-played songs to the artists that defined your year...</div>
|
|
508
|
+
</div>
|
|
509
|
+
|
|
510
|
+
<div class="email-item">
|
|
511
|
+
<div class="email-meta">
|
|
512
|
+
<span class="email-sender">David Kim</span>
|
|
513
|
+
<span class="email-time">2 days ago</span>
|
|
514
|
+
</div>
|
|
515
|
+
<div class="email-subject text-sm mb-1">Re: Code Review Feedback</div>
|
|
516
|
+
<div class="email-preview">Thanks for the quick review! I've addressed all the comments and pushed the changes to the PR...</div>
|
|
517
|
+
<div class="mt-2">
|
|
518
|
+
<span class="label label-work">Work</span>
|
|
519
|
+
</div>
|
|
520
|
+
</div>
|
|
521
|
+
|
|
522
|
+
<div class="email-item">
|
|
523
|
+
<div class="email-meta">
|
|
524
|
+
<span class="email-sender">Netflix</span>
|
|
525
|
+
<span class="email-time">3 days ago</span>
|
|
526
|
+
</div>
|
|
527
|
+
<div class="email-subject text-sm mb-1">New on Netflix this week</div>
|
|
528
|
+
<div class="email-preview">Check out the latest releases and returning favorites now streaming on Netflix...</div>
|
|
529
|
+
</div>
|
|
530
|
+
|
|
531
|
+
<div class="email-item">
|
|
532
|
+
<div class="email-meta">
|
|
533
|
+
<span class="email-sender">Emily Watson</span>
|
|
534
|
+
<span class="email-time">3 days ago</span>
|
|
535
|
+
</div>
|
|
536
|
+
<div class="email-subject text-sm mb-1">Lunch next week?</div>
|
|
537
|
+
<div class="email-preview">Hey! It's been a while since we caught up. Are you free for lunch next Tuesday?</div>
|
|
538
|
+
<div class="mt-2">
|
|
539
|
+
<span class="label label-personal">Personal</span>
|
|
540
|
+
</div>
|
|
541
|
+
</div>
|
|
542
|
+
|
|
543
|
+
<div class="email-item">
|
|
544
|
+
<div class="email-meta">
|
|
545
|
+
<span class="email-sender">AWS Notifications</span>
|
|
546
|
+
<span class="email-time">4 days ago</span>
|
|
547
|
+
</div>
|
|
548
|
+
<div class="email-subject text-sm mb-1">Monthly billing statement</div>
|
|
549
|
+
<div class="email-preview">Your AWS bill for November 2024 is now available. Total amount: $127.43...</div>
|
|
550
|
+
<div class="mt-2">
|
|
551
|
+
<span class="label label-work">Work</span>
|
|
552
|
+
</div>
|
|
553
|
+
</div>
|
|
554
|
+
</div>
|
|
555
|
+
|
|
556
|
+
<!-- Email Content -->
|
|
557
|
+
<div class="email-content">
|
|
558
|
+
<div class="email-header">
|
|
559
|
+
<div class="email-sender-info">
|
|
560
|
+
<div class="avatar avatar-lg">SC</div>
|
|
561
|
+
<div class="sender-details">
|
|
562
|
+
<h3>Sarah Chen</h3>
|
|
563
|
+
<p>sarah.chen@company.com · To: john.doe@starlight.dev</p>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
<div class="flex items-center gap-4">
|
|
567
|
+
<span class="text-sm text-slate-400">Today, 10:30 AM</span>
|
|
568
|
+
<div class="email-actions">
|
|
569
|
+
<button class="icon-btn" title="Reply">
|
|
570
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
571
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
|
|
572
|
+
</svg>
|
|
573
|
+
</button>
|
|
574
|
+
<button class="icon-btn" title="Forward">
|
|
575
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
576
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
|
|
577
|
+
</svg>
|
|
578
|
+
</button>
|
|
579
|
+
<button class="icon-btn" title="Star">
|
|
580
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
581
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
|
|
582
|
+
</svg>
|
|
583
|
+
</button>
|
|
584
|
+
<button class="icon-btn" title="More">
|
|
585
|
+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
586
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path>
|
|
587
|
+
</svg>
|
|
588
|
+
</button>
|
|
589
|
+
</div>
|
|
590
|
+
</div>
|
|
591
|
+
</div>
|
|
592
|
+
|
|
593
|
+
<h1 class="email-subject">Project Update: Q4 Roadmap</h1>
|
|
594
|
+
|
|
595
|
+
<div class="email-body">
|
|
596
|
+
<p>Hi John,</p>
|
|
597
|
+
|
|
598
|
+
<p>I hope this email finds you well. I wanted to share the latest updates on our Q4 roadmap and discuss the timeline for the upcoming features we've been planning.</p>
|
|
599
|
+
|
|
600
|
+
<p>First, I'm excited to announce that we've completed the initial phase of the Starlight UI component library. The feedback from the beta testing group has been overwhelmingly positive, with users praising the intuitive design and smooth animations.</p>
|
|
601
|
+
|
|
602
|
+
<p>Key highlights from this quarter:</p>
|
|
603
|
+
<ul style="margin: 1rem 0; padding-left: 1.5rem; color: inherit;">
|
|
604
|
+
<li style="margin-bottom: 0.5rem;">Completed 15 new component designs</li>
|
|
605
|
+
<li style="margin-bottom: 0.5rem;">Achieved 40% faster load times on dashboard views</li>
|
|
606
|
+
<li style="margin-bottom: 0.5rem;">Reduced bundle size by 25% through tree-shaking optimizations</li>
|
|
607
|
+
<li>Implemented dark mode with system preference detection</li>
|
|
608
|
+
</ul>
|
|
609
|
+
|
|
610
|
+
<p>I've attached the detailed roadmap document for your review. Please let me know if you have any questions or if you'd like to schedule a meeting to discuss the implementation details.</p>
|
|
611
|
+
|
|
612
|
+
<p>Looking forward to hearing your thoughts!</p>
|
|
613
|
+
|
|
614
|
+
<p>Best regards,<br>
|
|
615
|
+
Sarah Chen<br>
|
|
616
|
+
Senior Product Manager<br>
|
|
617
|
+
<span style="color: var(--color-starlight, #00d4ff);">Starlight Technologies</span></p>
|
|
618
|
+
</div>
|
|
619
|
+
|
|
620
|
+
<div class="mt-8 pt-6 border-t border-white/10">
|
|
621
|
+
<h3 class="text-sm font-semibold mb-4 text-slate-400">Attachments (2)</h3>
|
|
622
|
+
<div class="flex gap-4">
|
|
623
|
+
<div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
|
|
624
|
+
<div class="w-10 h-10 rounded-lg bg-red-500/20 flex items-center justify-center">
|
|
625
|
+
<svg class="w-5 h-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
|
|
626
|
+
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
|
|
627
|
+
</svg>
|
|
628
|
+
</div>
|
|
629
|
+
<div>
|
|
630
|
+
<div class="text-sm font-medium">Q4_Roadmap_2024.pdf</div>
|
|
631
|
+
<div class="text-xs text-slate-500">2.4 MB</div>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
<div class="flex items-center gap-3 p-3 rounded-lg bg-white/5 border border-white/10 cursor-pointer hover:bg-white/10 transition-colors">
|
|
635
|
+
<div class="w-10 h-10 rounded-lg bg-green-500/20 flex items-center justify-center">
|
|
636
|
+
<svg class="w-5 h-5 text-green-400" fill="currentColor" viewBox="0 0 20 20">
|
|
637
|
+
<path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"></path>
|
|
638
|
+
</svg>
|
|
639
|
+
</div>
|
|
640
|
+
<div>
|
|
641
|
+
<div class="text-sm font-medium">Budget_Summary.xlsx</div>
|
|
642
|
+
<div class="text-xs text-slate-500">856 KB</div>
|
|
643
|
+
</div>
|
|
644
|
+
</div>
|
|
645
|
+
</div>
|
|
646
|
+
</div>
|
|
647
|
+
|
|
648
|
+
<div class="mt-8 flex gap-3">
|
|
649
|
+
<button class="btn-starlight flex items-center gap-2">
|
|
650
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
651
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
|
|
652
|
+
</svg>
|
|
653
|
+
Reply
|
|
654
|
+
</button>
|
|
655
|
+
<button class="btn-secondary flex items-center gap-2">
|
|
656
|
+
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
657
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 5l7 7-7 7M5 5l7 7-7 7"></path>
|
|
658
|
+
</svg>
|
|
659
|
+
Forward
|
|
660
|
+
</button>
|
|
661
|
+
</div>
|
|
662
|
+
</div>
|
|
663
|
+
</div>
|
|
664
|
+
</div>
|
|
665
|
+
|
|
666
|
+
<script>
|
|
667
|
+
// Theme toggle functionality
|
|
668
|
+
function toggleTheme() {
|
|
669
|
+
document.body.classList.toggle('light-mode');
|
|
670
|
+
localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
|
|
671
|
+
}
|
|
672
|
+
|
|
673
|
+
// Check for saved theme preference
|
|
674
|
+
const savedTheme = localStorage.getItem('theme');
|
|
675
|
+
if (savedTheme === 'light') {
|
|
676
|
+
document.body.classList.add('light-mode');
|
|
677
|
+
}
|
|
678
|
+
|
|
679
|
+
// Email item click handler
|
|
680
|
+
document.querySelectorAll('.email-item').forEach(item => {
|
|
681
|
+
item.addEventListener('click', function() {
|
|
682
|
+
document.querySelectorAll('.email-item').forEach(i => i.classList.remove('active'));
|
|
683
|
+
this.classList.add('active');
|
|
684
|
+
this.classList.remove('unread');
|
|
685
|
+
});
|
|
686
|
+
});
|
|
687
|
+
|
|
688
|
+
// Folder click handler
|
|
689
|
+
document.querySelectorAll('.folder-item').forEach(folder => {
|
|
690
|
+
folder.addEventListener('click', function() {
|
|
691
|
+
document.querySelectorAll('.folder-item').forEach(f => f.classList.remove('active'));
|
|
692
|
+
this.classList.add('active');
|
|
693
|
+
});
|
|
694
|
+
});
|
|
695
|
+
</script>
|
|
696
|
+
</body>
|
|
697
|
+
</html>
|