@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.
Files changed (15) hide show
  1. package/README.md +1 -1
  2. package/dist/quantum.min.css +1 -4885
  3. package/examples/admin-panel.html +834 -0
  4. package/examples/analytics-dashboard.html +949 -0
  5. package/examples/chat-messaging.html +264 -0
  6. package/examples/email-template.html +697 -0
  7. package/examples/index.html +129 -1
  8. package/examples/music-streaming.html +1239 -0
  9. package/examples/portfolio-resume.html +653 -0
  10. package/examples/starlight.html +56 -3
  11. package/examples/travel/index.html +0 -4
  12. package/examples/video-streaming.html +564 -0
  13. package/package.json +1 -1
  14. package/src/styles/quantum-base.css +1 -1
  15. package/src/styles/quantum-components.css +954 -0
package/examples/chat-messaging.html ADDED
@@ -0,0 +1,264 @@
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 Chat - Messages</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
+ .chat-app {
12
+ display: grid;
13
+ grid-template-columns: 320px 1fr;
14
+ height: 100vh;
15
+ background: var(--bg-primary, #08081a);
16
+ overflow: hidden;
17
+ }
18
+ .chat-sidebar {
19
+ background: linear-gradient(180deg, rgba(15, 23, 42, 0.98) 0%, rgba(8, 8, 26, 0.98) 100%);
20
+ border-right: 1px solid rgba(255, 255, 255, 0.06);
21
+ display: flex;
22
+ flex-direction: column;
23
+ overflow: hidden;
24
+ }
25
+ .sidebar-header { padding: 1.25rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
26
+ .chat-tabs { display: flex; gap: 0.25rem; padding: 0.75rem 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
27
+ .chat-tab { flex: 1; padding: 0.5rem; background: transparent; border: none; border-radius: 0.5rem;
28
+ color: var(--text-muted, #64748b); font-size: 0.8125rem; font-weight: 500; cursor: pointer;
29
+ }
30
+ .chat-tab.active { color: var(--color-starlight, #00d4ff); background: rgba(0, 212, 255, 0.1); }
31
+ .conversation-list { flex: 1; overflow-y: auto; padding: 0.5rem; }
32
+ .conversation-item { display: flex; align-items: center; gap: 0.875rem; padding: 0.875rem; border-radius: 0.75rem; cursor: pointer; margin-bottom: 0.25rem; }
33
+ .conversation-item:hover { background: rgba(255, 255, 255, 0.03); }
34
+ .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
35
+ .conversation-avatar { position: relative; flex-shrink: 0; }
36
+ .conversation-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
37
+ .conversation-info { flex: 1; min-width: 0; }
38
+ .conversation-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
39
+ .conversation-name { font-size: 0.9375rem; font-weight: 600; color: var(--text-primary, #f1f5f9); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
40
+ .conversation-time { font-size: 0.75rem; color: var(--text-muted, #64748b); }
41
+ .conversation-message { font-size: 0.875rem; color: var(--text-secondary, #94a3b8); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
42
+ .conversation-item.unread .conversation-message { color: var(--text-primary, #f1f5f9); font-weight: 500; }
43
+ .chat-main { display: flex; flex-direction: column; overflow: hidden; }
44
+ .chat-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
45
+ .chat-header-info { display: flex; align-items: center; gap: 0.875rem; }
46
+ .chat-header-avatar { position: relative; }
47
+ .chat-header-avatar img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
48
+ .chat-header-details h3 { font-size: 1rem; font-weight: 600; color: var(--text-primary, #f1f5f9); margin-bottom: 0.125rem; }
49
+ .chat-header-details p { font-size: 0.8125rem; color: #10b981; }
50
+ .messages-container { flex: 1; overflow-y: auto; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
51
+ .message-date { text-align: center; margin: 1rem 0; }
52
+ .message-date span { font-size: 0.75rem; color: var(--text-muted, #64748b); background: rgba(255, 255, 255, 0.05); padding: 0.375rem 0.875rem; border-radius: 9999px; }
53
+ .message { display: flex; gap: 0.75rem; max-width: 70%; }
54
+ .message.sent { align-self: flex-end; flex-direction: row-reverse; }
55
+ .message-avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
56
+ .message-content { display: flex; flex-direction: column; gap: 0.25rem; }
57
+ .message-bubble { padding: 0.875rem 1.125rem; border-radius: 1.125rem; font-size: 0.9375rem; line-height: 1.5; }
58
+ .message.received .message-bubble { background: rgba(255, 255, 255, 0.08); color: var(--text-primary, #f1f5f9); border-bottom-left-radius: 0.25rem; }
59
+ .message.sent .message-bubble { background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); color: white; border-bottom-right-radius: 0.25rem; }
60
+ .message-time { font-size: 0.75rem; color: var(--text-muted, #64748b); align-self: flex-start; margin-left: 0.5rem; }
61
+ .message.sent .message-time { align-self: flex-end; margin-left: 0; margin-right: 0.5rem; }
62
+ .chat-input-container { padding: 1rem 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); background: rgba(255, 255, 255, 0.02); }
63
+ .chat-input-wrapper { display: flex; align-items: flex-end; gap: 0.75rem; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 1.5rem; padding: 0.625rem 0.75rem; }
64
+ .chat-input { flex: 1; background: transparent; border: none; color: var(--text-primary, #f1f5f9); font-size: 0.9375rem; resize: none; max-height: 120px; padding: 0.5rem 0; outline: none; }
65
+ .chat-input::placeholder { color: var(--text-muted, #64748b); }
66
+ .send-btn { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--color-starlight, #00d4ff), #3b82f6); border: none; color: white; display: flex; align-items: center; justify-content: center; cursor: pointer; }
67
+ .send-btn:hover { transform: scale(1.05); box-shadow: 0 4px 15px rgba(0, 212, 255, 0.4); }
68
+ .sun-icon { display: none; }
69
+ body.light-mode .sun-icon { display: inline; }
70
+ body.light-mode .moon-icon { display: none; }
71
+ body.light-mode { --bg-primary: #f8fafc; --text-primary: #0f172a; --text-secondary: #475569; --text-muted: #64748b; }
72
+ body.light-mode .chat-sidebar { background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); border-right-color: #e2e8f0; }
73
+ body.light-mode .chat-header, body.light-mode .chat-input-container { background: #f8fafc; border-color: #e2e8f0; }
74
+ body.light-mode .chat-input-wrapper { background: #f1f5f9; border-color: #e2e8f0; }
75
+ body.light-mode .conversation-item:hover { background: #f8fafc; }
76
+ body.light-mode .conversation-item.active { background: rgba(0, 212, 255, 0.08); }
77
+ body.light-mode .message.received .message-bubble { background: #f1f5f9; color: #0f172a; }
78
+ @media (max-width: 768px) { .chat-app { grid-template-columns: 1fr; } .chat-sidebar { display: none; } .message { max-width: 85%; } }
79
+ </style>
80
+ </head>
81
+ <body>
82
+ <div class="chat-app">
83
+ <aside class="chat-sidebar">
84
+ <div class="sidebar-header">
85
+ <div class="user-cell" style="margin-bottom: 1rem;">
86
+ <div class="avatar avatar-lg" style="position: relative;">
87
+ JD
88
+ <span class="online-indicator"></span>
89
+ </div>
90
+ <div class="user-info">
91
+ <div class="user-name">John Doe</div>
92
+ <div class="user-email" style="color: var(--text-muted, #64748b); font-size: 0.8125rem;">Online</div>
93
+ </div>
94
+ </div>
95
+ <div class="search-box">
96
+ <svg class="search-icon w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
97
+ <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>
98
+ </svg>
99
+ <input type="text" class="search-input search-input-full" placeholder="Search conversations...">
100
+ </div>
101
+ </div>
102
+ <div class="chat-tabs">
103
+ <button class="chat-tab active">All</button>
104
+ <button class="chat-tab">Unread</button>
105
+ <button class="chat-tab">Groups</button>
106
+ </div>
107
+ <div class="conversation-list">
108
+ <div class="conversation-item active unread">
109
+ <div class="conversation-avatar">
110
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" alt="Sarah">
111
+ <span class="online-indicator"></span>
112
+ </div>
113
+ <div class="conversation-info">
114
+ <div class="conversation-header">
115
+ <span class="conversation-name">Sarah Chen</span>
116
+ <span class="conversation-time">2m</span>
117
+ </div>
118
+ <div class="conversation-preview">
119
+ <span class="conversation-message">Hey! Are we still on for lunch?</span>
120
+ <span class="badge-count">2</span>
121
+ </div>
122
+ </div>
123
+ </div>
124
+ <div class="conversation-item unread">
125
+ <div class="conversation-avatar">
126
+ <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=100&h=100&fit=crop" alt="Mike">
127
+ <span class="online-indicator"></span>
128
+ </div>
129
+ <div class="conversation-info">
130
+ <div class="conversation-header">
131
+ <span class="conversation-name">Mike Ross</span>
132
+ <span class="conversation-time">15m</span>
133
+ </div>
134
+ <div class="conversation-preview">
135
+ <span class="conversation-message">Just sent the project files!</span>
136
+ <span class="unread-badge">1</span>
137
+ </div>
138
+ </div>
139
+ </div>
140
+ <div class="conversation-item">
141
+ <div class="conversation-avatar">
142
+ <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=100&h=100&fit=crop" alt="Emily">
143
+ </div>
144
+ <div class="conversation-info">
145
+ <div class="conversation-header">
146
+ <span class="conversation-name">Emily Watson</span>
147
+ <span class="conversation-time">2h</span>
148
+ </div>
149
+ <div class="conversation-preview">
150
+ <span class="conversation-message">Thanks for the help!</span>
151
+ </div>
152
+ </div>
153
+ </div>
154
+ </div>
155
+ <div class="theme-toggle-wrapper">
156
+ <button class="theme-btn" onclick="toggleTheme()">
157
+ <svg class="sun-icon w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><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"/></svg>
158
+ <svg class="moon-icon w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z"/></svg>
159
+ <span class="theme-label">Toggle Theme</span>
160
+ </button>
161
+ </div>
162
+ </aside>
163
+ <div class="chat-main">
164
+ <div class="chat-header">
165
+ <div class="chat-header-info">
166
+ <div class="chat-header-avatar">
167
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" alt="Sarah">
168
+ <span class="online-indicator"></span>
169
+ </div>
170
+ <div class="chat-header-details">
171
+ <h3>Sarah Chen</h3>
172
+ <p>Online</p>
173
+ </div>
174
+ </div>
175
+ <div style="display: flex; gap: 0.5rem;">
176
+ <button class="icon-btn icon-btn-circle">
177
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
178
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"></path>
179
+ </svg>
180
+ </button>
181
+ <button class="icon-btn icon-btn-circle">
182
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
183
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z"></path>
184
+ </svg>
185
+ </button>
186
+ <button class="icon-btn icon-btn-circle">
187
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
188
+ <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>
189
+ </svg>
190
+ </button>
191
+ </div>
192
+ </div>
193
+ <div class="messages-container">
194
+ <div class="message-date"><span>Today</span></div>
195
+ <div class="message received">
196
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" class="message-avatar" alt="Sarah">
197
+ <div class="message-content">
198
+ <div class="message-bubble">Hey! How's it going? 🌟</div>
199
+ <span class="message-time">9:41 AM</span>
200
+ </div>
201
+ </div>
202
+ <div class="message sent">
203
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="message-avatar" alt="You">
204
+ <div class="message-content">
205
+ <div class="message-bubble">Pretty good! Just working on the new project. How about you?</div>
206
+ <span class="message-time">9:43 AM</span>
207
+ </div>
208
+ </div>
209
+ <div class="message received">
210
+ <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop" class="message-avatar" alt="Sarah">
211
+ <div class="message-content">
212
+ <div class="message-bubble">Same here! Are we still on for lunch tomorrow?</div>
213
+ <span class="message-time">9:45 AM</span>
214
+ </div>
215
+ </div>
216
+ <div class="message sent">
217
+ <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?w=100&h=100&fit=crop" class="message-avatar" alt="You">
218
+ <div class="message-content">
219
+ <div class="message-bubble">Absolutely! Looking forward to it 🍕</div>
220
+ <span class="message-time">9:46 AM</span>
221
+ </div>
222
+ </div>
223
+ </div>
224
+ <div class="chat-input-container">
225
+ <div class="chat-input-wrapper">
226
+ <button class="icon-btn icon-btn-circle">
227
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
228
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
229
+ </svg>
230
+ </button>
231
+ <input type="text" class="chat-input" placeholder="Type a message...">
232
+ <button class="icon-btn icon-btn-circle">
233
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
234
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.172 7l-6.586 6.586a2 2 0 102.828 2.828l6.414-6.586a4 4 0 00-5.656-5.656l-6.415 6.585a6 6 0 108.486 8.486L20.5 13"></path>
235
+ </svg>
236
+ </button>
237
+ <button class="send-btn">
238
+ <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
239
+ <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8"></path>
240
+ </svg>
241
+ </button>
242
+ </div>
243
+ </div>
244
+ </div>
245
+ </div>
246
+ <script>
247
+ function toggleTheme() {
248
+ document.body.classList.toggle('light-mode');
249
+ localStorage.setItem('theme', document.body.classList.contains('light-mode') ? 'light' : 'dark');
250
+ }
251
+ const savedTheme = localStorage.getItem('theme');
252
+ if (savedTheme === 'light') document.body.classList.add('light-mode');
253
+ document.querySelectorAll('.conversation-item').forEach(item => {
254
+ item.addEventListener('click', function() {
255
+ document.querySelectorAll('.conversation-item').forEach(i => i.classList.remove('active'));
256
+ this.classList.add('active');
257
+ this.classList.remove('unread');
258
+ const badge = this.querySelector('.unread-badge');
259
+ if (badge) badge.style.display = 'none';
260
+ });
261
+ });
262
+ </script>
263
+ </body>
264
+ </html>