@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
package/examples/index.html
CHANGED
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
|
|
62
62
|
<header class="hero container">
|
|
63
63
|
<div class="pt-8 pb-12 text-center">
|
|
64
|
-
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.5.
|
|
64
|
+
<span class="text-[10px] font-black tracking-[0.3em] text-starlight uppercase mb-6 block">QuantumCSS v1.5.2</span>
|
|
65
65
|
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
66
66
|
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
67
67
|
A standardized, high-performance UI library.
|
|
@@ -74,6 +74,134 @@
|
|
|
74
74
|
</div>
|
|
75
75
|
</header>
|
|
76
76
|
|
|
77
|
+
<!-- Template Gallery -->
|
|
78
|
+
<section class="container py-12">
|
|
79
|
+
<h2 class="text-3xl font-black uppercase tracking-tighter mb-8 text-center">Template Gallery</h2>
|
|
80
|
+
<div class="grid-3">
|
|
81
|
+
<a href="blog-template.html" class="starlight-card hover:scale-105 transition-transform">
|
|
82
|
+
<div class="h-40 bg-gradient-to-br from-blue-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
83
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
84
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
85
|
+
</svg>
|
|
86
|
+
</div>
|
|
87
|
+
<h3 class="text-lg font-bold mb-2">Blog Template</h3>
|
|
88
|
+
<p class="text-sm text-slate-400">Modern blogging platform with dark mode support</p>
|
|
89
|
+
</a>
|
|
90
|
+
|
|
91
|
+
<a href="email-template.html" class="starlight-card hover:scale-105 transition-transform">
|
|
92
|
+
<div class="h-40 bg-gradient-to-br from-starlight/20 to-blue-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
93
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
94
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
|
|
95
|
+
</svg>
|
|
96
|
+
</div>
|
|
97
|
+
<h3 class="text-lg font-bold mb-2">Email Client</h3>
|
|
98
|
+
<p class="text-sm text-slate-400">Full-featured email interface with sidebar navigation</p>
|
|
99
|
+
</a>
|
|
100
|
+
|
|
101
|
+
<a href="gaming-template.html" class="starlight-card hover:scale-105 transition-transform">
|
|
102
|
+
<div class="h-40 bg-gradient-to-br from-purple-500/20 to-pink-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
103
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
104
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
105
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
106
|
+
</svg>
|
|
107
|
+
</div>
|
|
108
|
+
<h3 class="text-lg font-bold mb-2">Gaming Portal</h3>
|
|
109
|
+
<p class="text-sm text-slate-400">Immersive gaming experience with cosmic aesthetics</p>
|
|
110
|
+
</a>
|
|
111
|
+
|
|
112
|
+
<a href="news-template.html" class="starlight-card hover:scale-105 transition-transform">
|
|
113
|
+
<div class="h-40 bg-gradient-to-br from-orange-500/20 to-red-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
114
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
115
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z"></path>
|
|
116
|
+
</svg>
|
|
117
|
+
</div>
|
|
118
|
+
<h3 class="text-lg font-bold mb-2">News Portal</h3>
|
|
119
|
+
<p class="text-sm text-slate-400">Professional news platform with grid layouts</p>
|
|
120
|
+
</a>
|
|
121
|
+
|
|
122
|
+
<a href="shopping/index.html" class="starlight-card hover:scale-105 transition-transform">
|
|
123
|
+
<div class="h-40 bg-gradient-to-br from-green-500/20 to-teal-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
124
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
125
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z"></path>
|
|
126
|
+
</svg>
|
|
127
|
+
</div>
|
|
128
|
+
<h3 class="text-lg font-bold mb-2">Shopping Site</h3>
|
|
129
|
+
<p class="text-sm text-slate-400">E-commerce template with product grids</p>
|
|
130
|
+
</a>
|
|
131
|
+
|
|
132
|
+
<a href="travel/index.html" class="starlight-card hover:scale-105 transition-transform">
|
|
133
|
+
<div class="h-40 bg-gradient-to-br from-cyan-500/20 to-blue-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
134
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
135
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
136
|
+
</svg>
|
|
137
|
+
</div>
|
|
138
|
+
<h3 class="text-lg font-bold mb-2">Travel Site</h3>
|
|
139
|
+
<p class="text-sm text-slate-400">Adventure booking platform with destinations</p>
|
|
140
|
+
</a>
|
|
141
|
+
|
|
142
|
+
<a href="analytics-dashboard.html" class="starlight-card hover:scale-105 transition-transform">
|
|
143
|
+
<div class="h-40 bg-gradient-to-br from-indigo-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
144
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
145
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
|
|
146
|
+
</svg>
|
|
147
|
+
</div>
|
|
148
|
+
<h3 class="text-lg font-bold mb-2">Analytics Dashboard</h3>
|
|
149
|
+
<p class="text-sm text-slate-400">Data visualization with charts and real-time metrics</p>
|
|
150
|
+
</a>
|
|
151
|
+
|
|
152
|
+
<a href="admin-panel.html" class="starlight-card hover:scale-105 transition-transform">
|
|
153
|
+
<div class="h-40 bg-gradient-to-br from-rose-500/20 to-orange-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
154
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
155
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path>
|
|
156
|
+
</svg>
|
|
157
|
+
</div>
|
|
158
|
+
<h3 class="text-lg font-bold mb-2">Admin Panel</h3>
|
|
159
|
+
<p class="text-sm text-slate-400">User management, data tables, and system settings</p>
|
|
160
|
+
</a>
|
|
161
|
+
|
|
162
|
+
<a href="music-streaming.html" class="starlight-card hover:scale-105 transition-transform">
|
|
163
|
+
<div class="h-40 bg-gradient-to-br from-pink-500/20 to-rose-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
164
|
+
<svg class="w-16 h-16 text-starlight" fill="currentColor" viewBox="0 0 24 24">
|
|
165
|
+
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
|
|
166
|
+
</svg>
|
|
167
|
+
</div>
|
|
168
|
+
<h3 class="text-lg font-bold mb-2">Music Streaming</h3>
|
|
169
|
+
<p class="text-sm text-slate-400">Spotify-style music player with playlists and controls</p>
|
|
170
|
+
</a>
|
|
171
|
+
|
|
172
|
+
<a href="chat-messaging.html" class="starlight-card hover:scale-105 transition-transform">
|
|
173
|
+
<div class="h-40 bg-gradient-to-br from-blue-500/20 to-cyan-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
174
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
175
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path>
|
|
176
|
+
</svg>
|
|
177
|
+
</div>
|
|
178
|
+
<h3 class="text-lg font-bold mb-2">Chat Messaging</h3>
|
|
179
|
+
<p class="text-sm text-slate-400">Modern messaging app with real-time conversation UI</p>
|
|
180
|
+
</a>
|
|
181
|
+
|
|
182
|
+
<a href="portfolio-resume.html" class="starlight-card hover:scale-105 transition-transform">
|
|
183
|
+
<div class="h-40 bg-gradient-to-br from-violet-500/20 to-purple-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
184
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
185
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path>
|
|
186
|
+
</svg>
|
|
187
|
+
</div>
|
|
188
|
+
<h3 class="text-lg font-bold mb-2">Portfolio / Resume</h3>
|
|
189
|
+
<p class="text-sm text-slate-400">Professional portfolio with skills, projects, and experience</p>
|
|
190
|
+
</a>
|
|
191
|
+
|
|
192
|
+
<a href="video-streaming.html" class="starlight-card hover:scale-105 transition-transform">
|
|
193
|
+
<div class="h-40 bg-gradient-to-br from-red-500/20 to-orange-500/20 rounded-xl mb-4 flex items-center justify-center">
|
|
194
|
+
<svg class="w-16 h-16 text-starlight" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
195
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14.752 11.168l-3.197-2.132A1 1 0 0010 9.87v4.263a1 1 0 001.555.832l3.197-2.132a1 1 0 000-1.664z"></path>
|
|
196
|
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
|
197
|
+
</svg>
|
|
198
|
+
</div>
|
|
199
|
+
<h3 class="text-lg font-bold mb-2">Video Streaming</h3>
|
|
200
|
+
<p class="text-sm text-slate-400">YouTube-style video platform with categories and shorts</p>
|
|
201
|
+
</a>
|
|
202
|
+
</div>
|
|
203
|
+
</section>
|
|
204
|
+
|
|
77
205
|
<main class="container py-20">
|
|
78
206
|
<div class="grid-3">
|
|
79
207
|
<!-- Form Controls -->
|