@howssatoshi/quantumcss 1.4.2 → 1.4.3
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/examples/blog-template.html +282 -0
- package/examples/gaming-template.html +375 -0
- package/examples/images/starlight.jpg +0 -0
- package/examples/index.html +141 -0
- package/examples/kitchen-sink.html +1012 -0
- package/examples/news-template.html +333 -0
- 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 +344 -0
- package/examples/starlight.html +174 -0
- package/examples/travel/index.html +267 -0
- package/examples/verify_fixes.html +51 -0
- package/examples/verify_presets.html +31 -0
- package/package.json +2 -1
|
@@ -0,0 +1,141 @@
|
|
|
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 Design System</title>
|
|
7
|
+
<!-- QuantumCSS -->
|
|
8
|
+
<link rel="stylesheet" href="../dist/quantum.min.css">
|
|
9
|
+
<script src="../src/starlight.js"></script>
|
|
10
|
+
<style>
|
|
11
|
+
/* Theme Toggle specific local style */
|
|
12
|
+
.theme-toggle {
|
|
13
|
+
position: fixed; top: 2rem; right: 2rem; z-index: 100;
|
|
14
|
+
background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
|
|
15
|
+
width: 2.7rem; height: 2.7rem; border-radius: 50%; cursor: pointer;
|
|
16
|
+
color: inherit; font-weight: 700; backdrop-filter: blur(10px);
|
|
17
|
+
display: flex; align-items: center; justify-content: center;
|
|
18
|
+
transition: all 0.3s ease;
|
|
19
|
+
flex-shrink: 0;
|
|
20
|
+
}
|
|
21
|
+
.theme-toggle:hover { background: rgba(255,255,255,0.1); transform: scale(1.05); }
|
|
22
|
+
body.light-mode .theme-toggle { background: #fff; border-color: #cbd5e1; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
|
|
23
|
+
.theme-toggle svg { width: 1.5rem; height: 1.5rem; }
|
|
24
|
+
.hidden { display: none; }
|
|
25
|
+
</style>
|
|
26
|
+
</head>
|
|
27
|
+
<body>
|
|
28
|
+
<div class="starlight-stars" id="stars">
|
|
29
|
+
<div class="star" style="top: 10%; left: 20%; --duration: 3s;"></div>
|
|
30
|
+
<div class="star" style="top: 30%; left: 80%; --duration: 4s;"></div>
|
|
31
|
+
<div class="star" style="top: 70%; left: 40%; --duration: 5s;"></div>
|
|
32
|
+
<div class="star" style="top: 50%; left: 10%; --duration: 3s;"></div>
|
|
33
|
+
<div class="star" style="top: 90%; left: 90%; --duration: 4s;"></div>
|
|
34
|
+
</div>
|
|
35
|
+
<button class="theme-toggle" onclick="toggleTheme()" title="Toggle Theme">
|
|
36
|
+
<svg class="sun-icon hidden" 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"></path></svg>
|
|
37
|
+
<svg class="moon-icon" 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"></path></svg>
|
|
38
|
+
</button>
|
|
39
|
+
|
|
40
|
+
<div id="dialog" class="dialog-overlay" style="display: none;">
|
|
41
|
+
<div class="dialog-content">
|
|
42
|
+
<div class="p-12">
|
|
43
|
+
<h2 class="text-3xl font-black uppercase italic tracking-tighter mb-4">Advanced Deployment</h2>
|
|
44
|
+
<p class="text-base text-slate-400 font-medium mb-10">Configure your synchronization parameters below.</p>
|
|
45
|
+
|
|
46
|
+
<div class="mb-10">
|
|
47
|
+
<label class="text-[10px] font-black uppercase tracking-[0.3em] mb-4 block text-slate-500">Target Cluster</label>
|
|
48
|
+
<select class="input-starlight w-full h-14">
|
|
49
|
+
<option>Andromeda Prime</option>
|
|
50
|
+
<option>Nebula Secondary</option>
|
|
51
|
+
</select>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="flex gap-6 justify-end">
|
|
55
|
+
<button class="btn-secondary px-10 h-14 font-black uppercase tracking-widest text-[10px]" onclick="closeDialog()">Cancel</button>
|
|
56
|
+
<button class="btn-starlight px-10 h-14 font-black uppercase tracking-widest text-[10px]">Confirm Deploy</button>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
|
|
62
|
+
<header class="hero container">
|
|
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.4.2</span>
|
|
65
|
+
<h1 class="text-7xl md:text-8xl text-gradient-starlight font-black uppercase italic tracking-tighter mb-8">Starlight Design</h1>
|
|
66
|
+
<p class="text-xl text-slate-400 max-w-3xl mx-auto mb-12 font-medium leading-relaxed">
|
|
67
|
+
A standardized, high-performance UI library.
|
|
68
|
+
Standard design primitives. Premium components. Ethereal aesthetics.
|
|
69
|
+
</p>
|
|
70
|
+
<div class="flex justify-center gap-6">
|
|
71
|
+
<button class="btn-starlight px-12 h-14 text-[11px] font-black uppercase tracking-widest">Primary Launch</button>
|
|
72
|
+
<button class="btn-secondary px-12 h-14 text-[11px] font-black uppercase tracking-widest" onclick="openDialog()">Open Protocol</button>
|
|
73
|
+
</div>
|
|
74
|
+
</div>
|
|
75
|
+
</header>
|
|
76
|
+
|
|
77
|
+
<main class="container py-20">
|
|
78
|
+
<div class="grid-3">
|
|
79
|
+
<!-- Form Controls -->
|
|
80
|
+
<div class="starlight-card">
|
|
81
|
+
<h3 class="text-xl font-bold mb-6">Standard Controls</h3>
|
|
82
|
+
<div class="flex flex-col gap-6">
|
|
83
|
+
<div>
|
|
84
|
+
<label class="text-xs font-bold uppercase mb-2 block text-muted">Environment</label>
|
|
85
|
+
<select class="input-starlight w-full">
|
|
86
|
+
<option>Production</option>
|
|
87
|
+
<option>Staging</option>
|
|
88
|
+
</select>
|
|
89
|
+
</div>
|
|
90
|
+
<div class="flex gap-4">
|
|
91
|
+
<label class="has-tooltip flex items-center gap-3 cursor-pointer">
|
|
92
|
+
<input type="checkbox" class="checkbox-starlight" checked>
|
|
93
|
+
<span class="text-sm">Auto-sync</span>
|
|
94
|
+
<div class="tooltip">Synchronize with mesh network</div>
|
|
95
|
+
</label>
|
|
96
|
+
</div>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Custom Menu -->
|
|
101
|
+
<div class="starlight-card" id="menu-card">
|
|
102
|
+
<h3 class="text-xl font-bold mb-6">Floating Menus</h3>
|
|
103
|
+
<div class="dropdown w-full">
|
|
104
|
+
<button class="btn-secondary w-full justify-between">
|
|
105
|
+
Asset Actions <span>↓</span>
|
|
106
|
+
</button>
|
|
107
|
+
<div id="demo-dropdown" class="dropdown-menu w-full">
|
|
108
|
+
<button class="dropdown-item">View Analytics</button>
|
|
109
|
+
<button class="dropdown-item">Security Audit</button>
|
|
110
|
+
<div style="border-top: 1px solid rgba(255,255,255,0.05); margin: 0.5rem 0;"></div>
|
|
111
|
+
<button class="dropdown-item" style="color: #ff7e5f;">Decommission</button>
|
|
112
|
+
</div>
|
|
113
|
+
</div>
|
|
114
|
+
<p class="text-xs text-muted mt-6">Optimized layering with standardized stacking contexts.</p>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- Loading States -->
|
|
118
|
+
<div class="starlight-card">
|
|
119
|
+
<h3 class="text-xl font-bold mb-6">Loading States</h3>
|
|
120
|
+
<div class="flex flex-col gap-4">
|
|
121
|
+
<div class="skeleton w-3/4 h-6"></div>
|
|
122
|
+
<div class="skeleton w-full h-12"></div>
|
|
123
|
+
<div class="skeleton w-1/2 h-4"></div>
|
|
124
|
+
</div>
|
|
125
|
+
<p class="text-xs text-muted mt-6">Visible and high-contrast in both light and dark modes.</p>
|
|
126
|
+
</div>
|
|
127
|
+
</div>
|
|
128
|
+
</main>
|
|
129
|
+
|
|
130
|
+
<script>
|
|
131
|
+
function toggleTheme() {
|
|
132
|
+
document.body.classList.toggle('light-mode');
|
|
133
|
+
const isLight = document.body.classList.contains('light-mode');
|
|
134
|
+
document.querySelector('.sun-icon').classList.toggle('hidden', !isLight);
|
|
135
|
+
document.querySelector('.moon-icon').classList.toggle('hidden', isLight);
|
|
136
|
+
}
|
|
137
|
+
function openDialog() { document.getElementById('dialog').style.display = 'flex'; }
|
|
138
|
+
function closeDialog() { document.getElementById('dialog').style.display = 'none'; }
|
|
139
|
+
</script>
|
|
140
|
+
</body>
|
|
141
|
+
</html>
|