@howssatoshi/quantumcss 1.8.0 → 1.11.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 +11 -10
- package/dist/quantum.min.css +10 -1
- package/examples/admin-panel.html +317 -600
- package/examples/analytics-dashboard.html +136 -299
- package/examples/blog.css +297 -0
- package/examples/blog.html +216 -0
- package/examples/chat-messaging.html +43 -70
- package/examples/email-client.css +582 -0
- package/examples/email-client.html +432 -0
- package/examples/gaming-portal.css +352 -0
- package/examples/gaming-portal.html +239 -0
- package/examples/images/eric.png +0 -0
- package/examples/index.html +342 -259
- package/examples/kitchen-sink.html +332 -94
- package/examples/music-streaming.html +32 -91
- package/examples/news.html +199 -0
- package/examples/nova-shop.css +984 -0
- package/examples/portfolio.html +235 -0
- package/examples/shopping.html +812 -0
- package/examples/starlight.html +11 -9
- package/examples/task.md +12 -0
- package/examples/travel.html +514 -0
- package/examples/video-streaming.html +310 -92
- package/package.json +9 -3
- package/src/cli.js +5 -5
- package/src/defaults.js +19 -16
- package/src/generator.js +12 -3
- package/src/starlight.js +20 -15
- package/src/styles/quantum-animations.css +13 -13
- package/src/styles/quantum-base.css +110 -58
- package/src/styles/quantum-components.css +2379 -349
- package/src/styles/quantum-icons.css +345 -0
- package/src/styles/starlight.css +2702 -1054
- package/dist/index.html +0 -232
- package/dist/quantum.css +0 -2374
- package/examples/blog-template.html +0 -287
- package/examples/email-template.html +0 -712
- package/examples/gaming-template.html +0 -340
- package/examples/gradient-test.html +0 -124
- package/examples/news-template.html +0 -317
- package/examples/portfolio-resume.html +0 -647
- package/examples/shopping/images/headset.jpg +0 -0
- package/examples/shopping/images/sneakers.jpg +0 -0
- package/examples/shopping/images/windbreaker.jpg +0 -0
- package/examples/shopping/index.html +0 -338
- package/examples/theme-test.html +0 -159
- package/examples/travel/index.html +0 -275
- package/examples/verify_fixes.html +0 -52
- package/examples/verify_presets.html +0 -32
|
@@ -0,0 +1,432 @@
|
|
|
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
|
+
<link rel="stylesheet" href="email-client.css" />
|
|
10
|
+
<script src="../src/starlight.js"></script>
|
|
11
|
+
</head>
|
|
12
|
+
<body class="email-client">
|
|
13
|
+
<input type="checkbox" id="sidebar-toggle" style="display: none;" />
|
|
14
|
+
<label for="sidebar-toggle" class="sidebar-overlay"></label>
|
|
15
|
+
|
|
16
|
+
<!-- Sidebar -->
|
|
17
|
+
<email-sidebar>
|
|
18
|
+
<logo-section>
|
|
19
|
+
<logo>
|
|
20
|
+
<i class="q-icon-mail text-white"></i>
|
|
21
|
+
</logo>
|
|
22
|
+
<brand>Starlight Mail</brand>
|
|
23
|
+
</logo-section>
|
|
24
|
+
|
|
25
|
+
<compose-section>
|
|
26
|
+
<button class="compose-btn">
|
|
27
|
+
<i class="q-icon-plus"></i>
|
|
28
|
+
Compose
|
|
29
|
+
</button>
|
|
30
|
+
</compose-section>
|
|
31
|
+
|
|
32
|
+
<sidebar-scrollable>
|
|
33
|
+
<nav>
|
|
34
|
+
<button class="active">
|
|
35
|
+
<i class="q-icon-inbox"></i>
|
|
36
|
+
<span>Inbox</span>
|
|
37
|
+
<span class="nav-badge">12</span>
|
|
38
|
+
</button>
|
|
39
|
+
<button>
|
|
40
|
+
<i class="q-icon-star"></i>
|
|
41
|
+
<span>Starred</span>
|
|
42
|
+
</button>
|
|
43
|
+
<button>
|
|
44
|
+
<i class="q-icon-send"></i>
|
|
45
|
+
<span>Sent</span>
|
|
46
|
+
</button>
|
|
47
|
+
<button>
|
|
48
|
+
<i class="q-icon-edit"></i>
|
|
49
|
+
<span>Drafts</span>
|
|
50
|
+
<span class="nav-badge">3</span>
|
|
51
|
+
</button>
|
|
52
|
+
<button>
|
|
53
|
+
<i class="q-icon-trash"></i>
|
|
54
|
+
<span>Trash</span>
|
|
55
|
+
</button>
|
|
56
|
+
</nav>
|
|
57
|
+
|
|
58
|
+
<div class="divider"></div>
|
|
59
|
+
|
|
60
|
+
<h3>Labels</h3>
|
|
61
|
+
<nav class="labels-nav">
|
|
62
|
+
<button>
|
|
63
|
+
<span class="dot blue-dot"></span>
|
|
64
|
+
<span>Work</span>
|
|
65
|
+
</button>
|
|
66
|
+
<button>
|
|
67
|
+
<span class="dot green-dot"></span>
|
|
68
|
+
<span>Personal</span>
|
|
69
|
+
</button>
|
|
70
|
+
<button>
|
|
71
|
+
<span class="dot red-dot"></span>
|
|
72
|
+
<span>Important</span>
|
|
73
|
+
</button>
|
|
74
|
+
</nav>
|
|
75
|
+
</sidebar-scrollable>
|
|
76
|
+
|
|
77
|
+
<div class="user-profile-section">
|
|
78
|
+
<user-cell>
|
|
79
|
+
<user-avatar class="lg">JD</user-avatar>
|
|
80
|
+
<user-info>
|
|
81
|
+
<user-name>John Doe</user-name>
|
|
82
|
+
<user-email>john.doe@starlight.dev</user-email>
|
|
83
|
+
</user-info>
|
|
84
|
+
</user-cell>
|
|
85
|
+
<button
|
|
86
|
+
class="icon-btn"
|
|
87
|
+
onclick="toggleTheme()"
|
|
88
|
+
title="Toggle Theme"
|
|
89
|
+
>
|
|
90
|
+
<i class="q-icon-display"></i>
|
|
91
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
92
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
93
|
+
</button>
|
|
94
|
+
</div>
|
|
95
|
+
</email-sidebar>
|
|
96
|
+
|
|
97
|
+
<!-- Main Content -->
|
|
98
|
+
<main class="email-main">
|
|
99
|
+
<!-- Email List -->
|
|
100
|
+
<email-list>
|
|
101
|
+
<div class="top-bar">
|
|
102
|
+
<h2>Inbox</h2>
|
|
103
|
+
<actions>
|
|
104
|
+
<button class="icon-btn" title="Refresh">
|
|
105
|
+
<i class="q-icon-refresh"></i>
|
|
106
|
+
</button>
|
|
107
|
+
<label for="sidebar-toggle" class="icon-btn nav-toggle list-toggle" title="Menu">
|
|
108
|
+
<i class="q-icon-menu"></i>
|
|
109
|
+
</label>
|
|
110
|
+
</actions>
|
|
111
|
+
</div>
|
|
112
|
+
|
|
113
|
+
<div class="search-container">
|
|
114
|
+
<div class="search has-icon">
|
|
115
|
+
<i class="q-icon-search"></i>
|
|
116
|
+
<input
|
|
117
|
+
type="text"
|
|
118
|
+
class="input-starlight search-input"
|
|
119
|
+
placeholder="Search emails..."
|
|
120
|
+
/>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
|
|
124
|
+
<email-items>
|
|
125
|
+
<email-item class="unread active">
|
|
126
|
+
<email-meta>
|
|
127
|
+
<email-sender>Sarah Chen</email-sender>
|
|
128
|
+
<email-time>10:30 AM</email-time>
|
|
129
|
+
</email-meta>
|
|
130
|
+
<email-subject>Project Update: Q4 Roadmap</email-subject>
|
|
131
|
+
<email-preview>
|
|
132
|
+
Hi team, I wanted to share the latest updates on our Q4
|
|
133
|
+
roadmap and discuss the timeline for...
|
|
134
|
+
</email-preview>
|
|
135
|
+
<email-labels>
|
|
136
|
+
<email-label class="work">Work</email-label>
|
|
137
|
+
</email-labels>
|
|
138
|
+
</email-item>
|
|
139
|
+
|
|
140
|
+
<email-item class="unread">
|
|
141
|
+
<email-meta>
|
|
142
|
+
<email-sender>Alex Rivera</email-sender>
|
|
143
|
+
<email-time>9:45 AM</email-time>
|
|
144
|
+
</email-meta>
|
|
145
|
+
<email-subject>Design System Meeting - Tomorrow</email-subject>
|
|
146
|
+
<email-preview>
|
|
147
|
+
Hey everyone, just a reminder about our design system
|
|
148
|
+
meeting scheduled for tomorrow at 2 PM...
|
|
149
|
+
</email-preview>
|
|
150
|
+
<email-labels>
|
|
151
|
+
<email-label class="work">Work</email-label>
|
|
152
|
+
<email-label class="important">Important</email-label>
|
|
153
|
+
</email-labels>
|
|
154
|
+
</email-item>
|
|
155
|
+
|
|
156
|
+
<email-item>
|
|
157
|
+
<email-meta>
|
|
158
|
+
<email-sender>Mom</email-sender>
|
|
159
|
+
<email-time>Yesterday</email-time>
|
|
160
|
+
</email-meta>
|
|
161
|
+
<email-subject>Weekend Plans?</email-subject>
|
|
162
|
+
<email-preview>
|
|
163
|
+
Hi sweetie! Are you coming over for dinner this weekend?
|
|
164
|
+
Dad is making his famous lasagna...
|
|
165
|
+
</email-preview>
|
|
166
|
+
<email-labels>
|
|
167
|
+
<email-label class="personal">Personal</email-label>
|
|
168
|
+
</email-labels>
|
|
169
|
+
</email-item>
|
|
170
|
+
|
|
171
|
+
<email-item class="unread">
|
|
172
|
+
<email-meta>
|
|
173
|
+
<email-sender>GitHub</email-sender>
|
|
174
|
+
<email-time>Yesterday</email-time>
|
|
175
|
+
</email-meta>
|
|
176
|
+
<email-subject>Security alert for your repository</email-subject>
|
|
177
|
+
<email-preview>
|
|
178
|
+
We noticed a new sign-in to your GitHub account from a
|
|
179
|
+
device we don't recognize...
|
|
180
|
+
</email-preview>
|
|
181
|
+
</email-item>
|
|
182
|
+
|
|
183
|
+
<email-item>
|
|
184
|
+
<email-meta>
|
|
185
|
+
<email-sender>Marketing Team</email-sender>
|
|
186
|
+
<email-time>Yesterday</email-time>
|
|
187
|
+
</email-meta>
|
|
188
|
+
<email-subject>Campaign Performance Report</email-subject>
|
|
189
|
+
<email-preview>
|
|
190
|
+
Please find attached the performance report for last
|
|
191
|
+
month's marketing campaign. The results show...
|
|
192
|
+
</email-preview>
|
|
193
|
+
<email-labels>
|
|
194
|
+
<email-label class="work">Work</email-label>
|
|
195
|
+
</email-labels>
|
|
196
|
+
</email-item>
|
|
197
|
+
|
|
198
|
+
<email-item>
|
|
199
|
+
<email-meta>
|
|
200
|
+
<email-sender>Spotify</email-sender>
|
|
201
|
+
<email-time>2 days ago</email-time>
|
|
202
|
+
</email-meta>
|
|
203
|
+
<email-subject>Your 2024 Wrapped is here!</email-subject>
|
|
204
|
+
<email-preview>
|
|
205
|
+
Discover your year in music. From your most-played songs
|
|
206
|
+
to the artists that defined your year...
|
|
207
|
+
</email-preview>
|
|
208
|
+
</email-item>
|
|
209
|
+
|
|
210
|
+
<email-item>
|
|
211
|
+
<email-meta>
|
|
212
|
+
<email-sender>David Kim</email-sender>
|
|
213
|
+
<email-time>2 days ago</email-time>
|
|
214
|
+
</email-meta>
|
|
215
|
+
<email-subject>Re: Code Review Feedback</email-subject>
|
|
216
|
+
<email-preview>
|
|
217
|
+
Thanks for the quick review! I've addressed all the
|
|
218
|
+
comments and pushed the changes to the PR...
|
|
219
|
+
</email-preview>
|
|
220
|
+
<email-labels>
|
|
221
|
+
<email-label class="work">Work</email-label>
|
|
222
|
+
</email-labels>
|
|
223
|
+
</email-item>
|
|
224
|
+
|
|
225
|
+
<email-item>
|
|
226
|
+
<email-meta>
|
|
227
|
+
<email-sender>Netflix</email-sender>
|
|
228
|
+
<email-time>3 days ago</email-time>
|
|
229
|
+
</email-meta>
|
|
230
|
+
<email-subject>New on Netflix this week</email-subject>
|
|
231
|
+
<email-preview>
|
|
232
|
+
Check out the latest releases and returning favorites
|
|
233
|
+
now streaming on Netflix...
|
|
234
|
+
</email-preview>
|
|
235
|
+
</email-item>
|
|
236
|
+
|
|
237
|
+
<email-item>
|
|
238
|
+
<email-meta>
|
|
239
|
+
<email-sender>Emily Watson</email-sender>
|
|
240
|
+
<email-time>3 days ago</email-time>
|
|
241
|
+
</email-meta>
|
|
242
|
+
<email-subject>Lunch next week?</email-subject>
|
|
243
|
+
<email-preview>
|
|
244
|
+
Hey! It's been a while since we caught up. Are you free
|
|
245
|
+
for lunch next Tuesday?
|
|
246
|
+
</email-preview>
|
|
247
|
+
<email-labels>
|
|
248
|
+
<email-label class="personal">Personal</email-label>
|
|
249
|
+
</email-labels>
|
|
250
|
+
</email-item>
|
|
251
|
+
|
|
252
|
+
<email-item>
|
|
253
|
+
<email-meta>
|
|
254
|
+
<email-sender>AWS Notifications</email-sender>
|
|
255
|
+
<email-time>4 days ago</email-time>
|
|
256
|
+
</email-meta>
|
|
257
|
+
<email-subject>Monthly billing statement</email-subject>
|
|
258
|
+
<email-preview>
|
|
259
|
+
Your AWS bill for November 2024 is now available. Total
|
|
260
|
+
amount: $127.43...
|
|
261
|
+
</email-preview>
|
|
262
|
+
<email-labels>
|
|
263
|
+
<email-label class="work">Work</email-label>
|
|
264
|
+
</email-labels>
|
|
265
|
+
</email-item>
|
|
266
|
+
</email-items>
|
|
267
|
+
</email-list>
|
|
268
|
+
|
|
269
|
+
<!-- Email Content -->
|
|
270
|
+
<email-content id="email-content">
|
|
271
|
+
<content-top-bar>
|
|
272
|
+
<button class="mobile-back" onclick="closeEmail()">
|
|
273
|
+
<i class="q-icon-chevron-left-long"></i>
|
|
274
|
+
Back to Inbox
|
|
275
|
+
</button>
|
|
276
|
+
<user-cell>
|
|
277
|
+
<user-avatar class="sm">SC</user-avatar>
|
|
278
|
+
<sender-details>
|
|
279
|
+
<h3>Sarah Chen</h3>
|
|
280
|
+
<p>
|
|
281
|
+
sarah.chen@company.com · To:
|
|
282
|
+
john.doe@starlight.dev
|
|
283
|
+
</p>
|
|
284
|
+
</sender-details>
|
|
285
|
+
</user-cell>
|
|
286
|
+
<email-time-full>Today, 10:30 AM</email-time-full>
|
|
287
|
+
</content-top-bar>
|
|
288
|
+
|
|
289
|
+
<email-header>
|
|
290
|
+
<h1 class="email-subject">Project Update: Q4 Roadmap</h1>
|
|
291
|
+
<div class="spacer"></div>
|
|
292
|
+
<actions>
|
|
293
|
+
<button class="icon-btn" title="Reply">
|
|
294
|
+
<i class="q-icon-reply"></i>
|
|
295
|
+
</button>
|
|
296
|
+
<button class="icon-btn" title="Forward">
|
|
297
|
+
<i class="q-icon-forward"></i>
|
|
298
|
+
</button>
|
|
299
|
+
<button class="icon-btn" title="Star">
|
|
300
|
+
<i class="q-icon-star"></i>
|
|
301
|
+
</button>
|
|
302
|
+
<label for="sidebar-toggle" class="icon-btn nav-toggle content-toggle" title="Menu">
|
|
303
|
+
<i class="q-icon-menu"></i>
|
|
304
|
+
</label>
|
|
305
|
+
</actions>
|
|
306
|
+
</email-header>
|
|
307
|
+
|
|
308
|
+
<email-view>
|
|
309
|
+
<email-body>
|
|
310
|
+
<p>Hi John,</p>
|
|
311
|
+
|
|
312
|
+
<p>
|
|
313
|
+
I hope this email finds you well. I wanted to share the
|
|
314
|
+
latest updates on our Q4 roadmap and discuss the
|
|
315
|
+
timeline for the upcoming features we've been planning.
|
|
316
|
+
</p>
|
|
317
|
+
|
|
318
|
+
<p>
|
|
319
|
+
First, I'm excited to announce that we've completed the
|
|
320
|
+
initial phase of the Starlight UI component library. The
|
|
321
|
+
feedback from the beta testing group has been
|
|
322
|
+
overwhelmingly positive, with users praising the
|
|
323
|
+
intuitive design and smooth animations.
|
|
324
|
+
</p>
|
|
325
|
+
|
|
326
|
+
<p>Key highlights from this quarter:</p>
|
|
327
|
+
<ul>
|
|
328
|
+
<li>
|
|
329
|
+
Completed 15 new component designs
|
|
330
|
+
</li>
|
|
331
|
+
<li>
|
|
332
|
+
Achieved 40% faster load times on dashboard views
|
|
333
|
+
</li>
|
|
334
|
+
<li>
|
|
335
|
+
Reduced bundle size by 25% through tree-shaking
|
|
336
|
+
optimizations
|
|
337
|
+
</li>
|
|
338
|
+
<li>
|
|
339
|
+
Implemented dark mode with system preference
|
|
340
|
+
detection
|
|
341
|
+
</li>
|
|
342
|
+
</ul>
|
|
343
|
+
|
|
344
|
+
<p>
|
|
345
|
+
I've attached the detailed roadmap document for your
|
|
346
|
+
review. Please let me know if you have any questions or
|
|
347
|
+
if you'd like to schedule a meeting to discuss the
|
|
348
|
+
implementation details.
|
|
349
|
+
</p>
|
|
350
|
+
|
|
351
|
+
<p>Looking forward to hearing your thoughts!</p>
|
|
352
|
+
|
|
353
|
+
<p>
|
|
354
|
+
Best regards,<br />
|
|
355
|
+
Sarah Chen<br />
|
|
356
|
+
Senior Product Manager<br />
|
|
357
|
+
<span class="starlight-brand"
|
|
358
|
+
>Starlight Technologies</span>
|
|
359
|
+
</p>
|
|
360
|
+
</email-body>
|
|
361
|
+
|
|
362
|
+
<attachments>
|
|
363
|
+
<h3>
|
|
364
|
+
Attachments (2)
|
|
365
|
+
</h3>
|
|
366
|
+
<div class="attachments-list">
|
|
367
|
+
<attachment-card>
|
|
368
|
+
<file-icon class="pdf">
|
|
369
|
+
<i class="q-icon-file"></i>
|
|
370
|
+
</file-icon>
|
|
371
|
+
<file-info>
|
|
372
|
+
<file-name>
|
|
373
|
+
Q4_Roadmap_2024.pdf
|
|
374
|
+
</file-name>
|
|
375
|
+
<file-size>2.4 MB</file-size>
|
|
376
|
+
</file-info>
|
|
377
|
+
</attachment-card>
|
|
378
|
+
<attachment-card>
|
|
379
|
+
<file-icon class="excel">
|
|
380
|
+
<i class="q-icon-file"></i>
|
|
381
|
+
</file-icon>
|
|
382
|
+
<file-info>
|
|
383
|
+
<file-name>
|
|
384
|
+
Budget_Summary.xlsx
|
|
385
|
+
</file-name>
|
|
386
|
+
<file-size>856 KB</file-size>
|
|
387
|
+
</file-info>
|
|
388
|
+
</attachment-card>
|
|
389
|
+
</div>
|
|
390
|
+
</attachments>
|
|
391
|
+
|
|
392
|
+
<actions class="content-footer">
|
|
393
|
+
<button class="btn-starlight">
|
|
394
|
+
<i class="q-icon-reply"></i>
|
|
395
|
+
Reply
|
|
396
|
+
</button>
|
|
397
|
+
<button class="btn-secondary">
|
|
398
|
+
<i class="q-icon-forward"></i>
|
|
399
|
+
Forward
|
|
400
|
+
</button>
|
|
401
|
+
</actions>
|
|
402
|
+
</email-view>
|
|
403
|
+
</email-content>
|
|
404
|
+
</main>
|
|
405
|
+
|
|
406
|
+
<script>
|
|
407
|
+
// Email item click handler
|
|
408
|
+
document.querySelectorAll("email-item").forEach((item) => {
|
|
409
|
+
item.addEventListener("click", function () {
|
|
410
|
+
document
|
|
411
|
+
.querySelectorAll("email-item")
|
|
412
|
+
.forEach((i) => i.classList.remove("active"));
|
|
413
|
+
this.classList.add("active");
|
|
414
|
+
this.classList.remove("unread");
|
|
415
|
+
|
|
416
|
+
// Mobile view toggle
|
|
417
|
+
if (window.innerWidth <= 768) {
|
|
418
|
+
document
|
|
419
|
+
.getElementById("email-content")
|
|
420
|
+
.classList.add("mobile-visible");
|
|
421
|
+
}
|
|
422
|
+
});
|
|
423
|
+
});
|
|
424
|
+
|
|
425
|
+
function closeEmail() {
|
|
426
|
+
document
|
|
427
|
+
.getElementById("email-content")
|
|
428
|
+
.classList.remove("mobile-visible");
|
|
429
|
+
}
|
|
430
|
+
</script>
|
|
431
|
+
</body>
|
|
432
|
+
</html>
|