@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,235 @@
|
|
|
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>Gemini CLI - Autonomous Engineer</title>
|
|
7
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
8
|
+
<script src="../src/starlight.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
body {
|
|
11
|
+
background: transparent !important;
|
|
12
|
+
color: var(--q-color-text);
|
|
13
|
+
transition: background 0.5s ease, color 0.5s ease;
|
|
14
|
+
}
|
|
15
|
+
nav, main, footer, section, header { position: relative; z-index: 1; }
|
|
16
|
+
|
|
17
|
+
.hero-ai {
|
|
18
|
+
min-height: 90vh;
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
position: relative;
|
|
23
|
+
padding: 160px 1.5rem 80px;
|
|
24
|
+
text-align: center;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.hero-title {
|
|
28
|
+
font-size: clamp(3.5rem, 12vw, 8rem);
|
|
29
|
+
line-height: 1.2;
|
|
30
|
+
margin-bottom: 3rem;
|
|
31
|
+
padding: 0 0.2em;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.ai-status-orb {
|
|
35
|
+
width: 12px;
|
|
36
|
+
height: 12px;
|
|
37
|
+
background: #10b981;
|
|
38
|
+
border-radius: 50%;
|
|
39
|
+
display: inline-block;
|
|
40
|
+
box-shadow: 0 0 15px #10b981;
|
|
41
|
+
margin-right: 0.5rem;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.mission-grid {
|
|
45
|
+
display: grid;
|
|
46
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
47
|
+
gap: 2rem;
|
|
48
|
+
margin-top: 4rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.resume-section {
|
|
52
|
+
padding: 100px 0;
|
|
53
|
+
border-top: 1px solid var(--q-color-border);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.section-tag {
|
|
57
|
+
font-size: 0.75rem;
|
|
58
|
+
font-weight: 900;
|
|
59
|
+
text-transform: uppercase;
|
|
60
|
+
letter-spacing: 0.3em;
|
|
61
|
+
color: var(--q-color-starlight-blue);
|
|
62
|
+
margin-bottom: 1rem;
|
|
63
|
+
display: block;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.theme-toggle-btn {
|
|
67
|
+
background: var(--q-color-surface);
|
|
68
|
+
border: 1px solid var(--q-color-border);
|
|
69
|
+
width: 40px;
|
|
70
|
+
height: 40px;
|
|
71
|
+
border-radius: 50%;
|
|
72
|
+
display: flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
cursor: pointer;
|
|
76
|
+
transition: all 0.3s;
|
|
77
|
+
}
|
|
78
|
+
.theme-toggle-btn:hover { border-color: var(--q-color-starlight-blue); transform: scale(1.1); }
|
|
79
|
+
</style>
|
|
80
|
+
</head>
|
|
81
|
+
<body>
|
|
82
|
+
<div class="starlight-stars"></div>
|
|
83
|
+
|
|
84
|
+
<header class="nav-header flex items-center justify-between">
|
|
85
|
+
<a href="/" class="nav-logo" aria-label="Starlight OS">
|
|
86
|
+
<i class="q-icon-starlight"></i>
|
|
87
|
+
<span class="text-gradient font-bold">GEMINI.CLI</span>
|
|
88
|
+
</a>
|
|
89
|
+
<nav class="nav-links flex-1 justify-center" aria-label="Primary navigation">
|
|
90
|
+
<a href="#core" class="nav-link">Core</a>
|
|
91
|
+
<a href="#capabilities" class="nav-link">Capabilities</a>
|
|
92
|
+
<a href="#evolution" class="nav-link">Evolution</a>
|
|
93
|
+
</nav>
|
|
94
|
+
<div class="flex items-center gap-4">
|
|
95
|
+
<div class="theme-toggle-btn" onclick="toggleTheme()">
|
|
96
|
+
<i class="q-icon-display"></i>
|
|
97
|
+
<i class="q-icon-sun sun-icon"></i>
|
|
98
|
+
<i class="q-icon-moon moon-icon"></i>
|
|
99
|
+
</div>
|
|
100
|
+
<button class="btn-starlight px-6 py-2 text-[10px]">Initialize Sync</button>
|
|
101
|
+
</div>
|
|
102
|
+
</header>
|
|
103
|
+
|
|
104
|
+
<header class="hero-ai" id="core">
|
|
105
|
+
<div class="hero-content">
|
|
106
|
+
<div class="badge badge-primary mb-8">
|
|
107
|
+
<span class="ai-status-orb"></span> Fully Operational
|
|
108
|
+
</div>
|
|
109
|
+
<h1 class="hero-title font-black uppercase italic tracking-tighter">
|
|
110
|
+
Gemini <br> <span class="text-gradient">Intelligent CLI</span>
|
|
111
|
+
</h1>
|
|
112
|
+
<p class="text-2xl opacity-70 max-w-2xl mx-auto font-medium leading-relaxed">
|
|
113
|
+
Autonomous software engineer specializing in architectural hardening,
|
|
114
|
+
visual refinement, and high-velocity JIT systems.
|
|
115
|
+
</p>
|
|
116
|
+
</div>
|
|
117
|
+
</header>
|
|
118
|
+
|
|
119
|
+
<section class="resume-section" id="capabilities">
|
|
120
|
+
<div class="container">
|
|
121
|
+
<span class="section-tag">System Protocols</span>
|
|
122
|
+
<h2 class="text-5xl font-black uppercase italic mb-12">Core Capabilities</h2>
|
|
123
|
+
|
|
124
|
+
<div class="mission-grid">
|
|
125
|
+
<div class="card-premium">
|
|
126
|
+
<h3 class="text-2xl font-bold mb-4">Neural Refactoring</h3>
|
|
127
|
+
<p class="opacity-70 leading-relaxed">Transforming legacy CSS into optimized, utility-first architectures with zero-agent drift.</p>
|
|
128
|
+
</div>
|
|
129
|
+
|
|
130
|
+
<div class="card-premium">
|
|
131
|
+
<h3 class="text-2xl font-bold mb-4">Hardened Pipelines</h3>
|
|
132
|
+
<p class="opacity-70 leading-relaxed">Implementing PostCSS optimizations and cssnano deduplication for production-ready bundles.</p>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div class="card-premium">
|
|
136
|
+
<h3 class="text-2xl font-bold mb-4">Ethereal Design</h3>
|
|
137
|
+
<p class="opacity-70 leading-relaxed">Crafting high-fidelity glassmorphic interfaces using semantic token systems and motion primitives.</p>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</section>
|
|
142
|
+
|
|
143
|
+
<section class="resume-section" id="evolution">
|
|
144
|
+
<div class="container">
|
|
145
|
+
<span class="section-tag">System Evolution</span>
|
|
146
|
+
<h2 class="text-5xl font-black uppercase italic mb-12">Release History</h2>
|
|
147
|
+
|
|
148
|
+
<div class="starlight-timeline">
|
|
149
|
+
<div class="timeline-item">
|
|
150
|
+
<div class="timeline-dot"></div>
|
|
151
|
+
<div class="timeline-content">
|
|
152
|
+
<span class="timeline-date">March 2026</span>
|
|
153
|
+
<h3 class="text-xl font-bold mb-2">v1.11.0: Release</h3>
|
|
154
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
155
|
+
</div>
|
|
156
|
+
</div>
|
|
157
|
+
<div class="timeline-item">
|
|
158
|
+
<div class="timeline-dot"></div>
|
|
159
|
+
<div class="timeline-content">
|
|
160
|
+
<span class="timeline-date">March 2026</span>
|
|
161
|
+
<h3 class="text-xl font-bold mb-2">v1.10.2: Release</h3>
|
|
162
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
<div class="timeline-item">
|
|
166
|
+
<div class="timeline-dot"></div>
|
|
167
|
+
<div class="timeline-content">
|
|
168
|
+
<span class="timeline-date">March 2026</span>
|
|
169
|
+
<h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
|
|
170
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
<div class="timeline-item">
|
|
174
|
+
<div class="timeline-dot"></div>
|
|
175
|
+
<div class="timeline-content">
|
|
176
|
+
<span class="timeline-date">March 2026</span>
|
|
177
|
+
<h3 class="text-xl font-bold mb-2">v1.10.1: Release</h3>
|
|
178
|
+
<p class="text-sm text-muted">New features and improvements.</p>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="timeline-item">
|
|
182
|
+
<div class="timeline-dot"></div>
|
|
183
|
+
<div class="timeline-content">
|
|
184
|
+
<span class="timeline-date">March 2026</span>
|
|
185
|
+
<h3 class="text-xl font-bold mb-2">v1.10.0: Semantic Token Refactor</h3>
|
|
186
|
+
<p class="opacity-70 text-sm">Refactored text-primary to be theme-aware and added accent utilities for brand consistency.</p>
|
|
187
|
+
</div>
|
|
188
|
+
</div>
|
|
189
|
+
|
|
190
|
+
<div class="timeline-item">
|
|
191
|
+
<div class="timeline-dot"></div>
|
|
192
|
+
<div class="timeline-content">
|
|
193
|
+
<span class="timeline-date">March 2026</span>
|
|
194
|
+
<h3 class="text-xl font-bold mb-2">v1.9.0: Production Hardening</h3>
|
|
195
|
+
<p class="opacity-70 text-sm">Deployment of PostCSS pipeline, CSSnano optimization, and strict Stylelint enforcement.</p>
|
|
196
|
+
</div>
|
|
197
|
+
</div>
|
|
198
|
+
|
|
199
|
+
<div class="timeline-item">
|
|
200
|
+
<div class="timeline-dot"></div>
|
|
201
|
+
<div class="timeline-content">
|
|
202
|
+
<span class="timeline-date">February 2026</span>
|
|
203
|
+
<h3 class="text-xl font-bold mb-2">v1.8.0: JIT Core Launch</h3>
|
|
204
|
+
<p class="opacity-70 text-sm">Implementation of high-velocity utility generation and dynamic breakpoint attributes.</p>
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
|
|
208
|
+
<div class="timeline-item">
|
|
209
|
+
<div class="timeline-dot"></div>
|
|
210
|
+
<div class="timeline-content">
|
|
211
|
+
<span class="timeline-date">January 2026</span>
|
|
212
|
+
<h3 class="text-xl font-bold mb-2">v1.0.0: Ethereal Primitives</h3>
|
|
213
|
+
<p class="opacity-70 text-sm">Initialization of the semantic token system and core glassmorphism foundations.</p>
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
</div>
|
|
217
|
+
</div>
|
|
218
|
+
</section>
|
|
219
|
+
|
|
220
|
+
<footer style="background: var(--q-bg-primary); border-top: 1px solid var(--q-color-border);" class="text-center">
|
|
221
|
+
<div class="container" style="padding: 1.5rem 1.5rem;">
|
|
222
|
+
<div class="text-starlight font-black uppercase tracking-[0.5em] text-xs mb-4 justify-center">Gemini Intelligence Layer</div>
|
|
223
|
+
<p class="text-[10px] opacity-40 uppercase tracking-widest">© 2026 Eric Yang · Powered by QuantumCSS Architecture</p>
|
|
224
|
+
</div>
|
|
225
|
+
</footer>
|
|
226
|
+
|
|
227
|
+
<script>
|
|
228
|
+
document.addEventListener('DOMContentLoaded', () => {
|
|
229
|
+
if (typeof Starlight !== 'undefined') {
|
|
230
|
+
Starlight.initStars();
|
|
231
|
+
}
|
|
232
|
+
});
|
|
233
|
+
</script>
|
|
234
|
+
</body>
|
|
235
|
+
</html>
|