@whykusanagi/corrupted-theme 0.1.6 → 0.1.8
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/CHANGELOG.md +38 -0
- package/README.md +207 -42
- package/docs/COMPONENTS_REFERENCE.md +142 -35
- package/docs/governance/VERSION_MANAGEMENT.md +2 -2
- package/docs/governance/VERSION_REFERENCES.md +56 -199
- package/docs/platforms/NPM_PACKAGE.md +9 -7
- package/examples/advanced/glsl-vortex.html +298 -0
- package/examples/advanced/particles-bg.html +264 -0
- package/examples/basic/multi-gallery.html +155 -0
- package/examples/button.html +5 -2
- package/examples/card.html +5 -2
- package/examples/extensions-showcase.html +41 -2
- package/examples/form.html +5 -2
- package/examples/index.html +34 -6
- package/examples/interactive-components.html +223 -0
- package/examples/layout.html +5 -2
- package/examples/nikke-team-builder.html +6 -3
- package/examples/showcase-complete.html +14 -13
- package/examples/showcase.html +6 -3
- package/package.json +8 -5
- package/src/core/corrupted-text.js +25 -5
- package/src/core/event-tracker.js +46 -0
- package/src/core/timer-registry.js +94 -0
- package/src/core/typing-animation.js +36 -17
- package/src/css/components.css +108 -0
- package/src/lib/carousel.js +308 -0
- package/src/lib/celeste-widget.js +178 -47
- package/src/lib/character-corruption.js +33 -8
- package/src/lib/components.js +357 -25
- package/src/lib/corrupted-particles.js +309 -0
- package/src/lib/corrupted-text.js +21 -5
- package/src/lib/corrupted-vortex.js +329 -0
- package/src/lib/corruption-loading.js +40 -10
- package/src/lib/countdown-widget.js +25 -6
- package/src/lib/gallery.js +420 -354
|
@@ -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>Corrupted Particles - Corrupted Theme</title>
|
|
7
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
|
+
<link rel="stylesheet" href="../../src/css/theme.css">
|
|
9
|
+
<style>
|
|
10
|
+
body { margin: 0; background: #000; overflow: hidden; }
|
|
11
|
+
|
|
12
|
+
#particles-canvas {
|
|
13
|
+
position: fixed;
|
|
14
|
+
inset: 0;
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
z-index: 0;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.ui-layer {
|
|
21
|
+
position: relative;
|
|
22
|
+
z-index: 1;
|
|
23
|
+
display: flex;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
align-items: center;
|
|
26
|
+
justify-content: center;
|
|
27
|
+
min-height: 100vh;
|
|
28
|
+
padding: var(--spacing-2xl);
|
|
29
|
+
gap: var(--spacing-xl);
|
|
30
|
+
pointer-events: none;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.controls-panel {
|
|
34
|
+
pointer-events: auto;
|
|
35
|
+
background: var(--glass);
|
|
36
|
+
border: 1px solid var(--border);
|
|
37
|
+
border-radius: var(--radius-lg);
|
|
38
|
+
padding: var(--spacing-lg);
|
|
39
|
+
width: 100%;
|
|
40
|
+
max-width: 440px;
|
|
41
|
+
backdrop-filter: blur(12px);
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.controls-panel h2 {
|
|
45
|
+
color: var(--accent);
|
|
46
|
+
margin: 0 0 var(--spacing-md);
|
|
47
|
+
font-size: 0.9rem;
|
|
48
|
+
text-transform: uppercase;
|
|
49
|
+
letter-spacing: 0.1em;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.control-row {
|
|
53
|
+
display: flex;
|
|
54
|
+
align-items: center;
|
|
55
|
+
gap: var(--spacing-md);
|
|
56
|
+
margin-bottom: var(--spacing-sm);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.control-row label {
|
|
60
|
+
color: var(--text-muted);
|
|
61
|
+
font-size: 0.8rem;
|
|
62
|
+
width: 110px;
|
|
63
|
+
flex-shrink: 0;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.control-row input[type="range"] {
|
|
67
|
+
flex: 1;
|
|
68
|
+
accent-color: var(--corrupted-magenta);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.val {
|
|
72
|
+
color: var(--corrupted-cyan);
|
|
73
|
+
font-size: 0.8rem;
|
|
74
|
+
width: 40px;
|
|
75
|
+
text-align: right;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.lewd-row {
|
|
79
|
+
border-top: 1px solid var(--border);
|
|
80
|
+
margin-top: var(--spacing-sm);
|
|
81
|
+
padding-top: var(--spacing-sm);
|
|
82
|
+
display: flex;
|
|
83
|
+
align-items: center;
|
|
84
|
+
gap: var(--spacing-md);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.lewd-row label {
|
|
88
|
+
color: var(--corrupted-purple);
|
|
89
|
+
font-size: 0.8rem;
|
|
90
|
+
flex: 1;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.lewd-row span.rating {
|
|
94
|
+
color: var(--corrupted-red);
|
|
95
|
+
font-size: 0.7rem;
|
|
96
|
+
border: 1px solid var(--corrupted-red);
|
|
97
|
+
padding: 1px 4px;
|
|
98
|
+
border-radius: 3px;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.code-block {
|
|
102
|
+
pointer-events: auto;
|
|
103
|
+
background: var(--glass);
|
|
104
|
+
border: 1px solid var(--border);
|
|
105
|
+
border-radius: var(--radius-lg);
|
|
106
|
+
padding: var(--spacing-lg);
|
|
107
|
+
width: 100%;
|
|
108
|
+
max-width: 540px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.code-block h3 {
|
|
112
|
+
color: var(--accent);
|
|
113
|
+
font-size: 0.8rem;
|
|
114
|
+
text-transform: uppercase;
|
|
115
|
+
letter-spacing: 0.1em;
|
|
116
|
+
margin: 0 0 var(--spacing-md);
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.code-block pre {
|
|
120
|
+
margin: 0;
|
|
121
|
+
overflow-x: auto;
|
|
122
|
+
font-size: 0.75rem;
|
|
123
|
+
color: var(--corrupted-cyan);
|
|
124
|
+
line-height: 1.5;
|
|
125
|
+
}
|
|
126
|
+
</style>
|
|
127
|
+
</head>
|
|
128
|
+
<body>
|
|
129
|
+
|
|
130
|
+
<nav class="navbar">
|
|
131
|
+
<div class="navbar-content">
|
|
132
|
+
<a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
133
|
+
<ul class="navbar-links">
|
|
134
|
+
<li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
|
|
135
|
+
<li class="has-submenu">
|
|
136
|
+
<a href="../showcase-complete.html">
|
|
137
|
+
<i class="fas fa-cube"></i> Components
|
|
138
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
139
|
+
</a>
|
|
140
|
+
<div class="submenu">
|
|
141
|
+
<a href="../showcase-complete.html"><i class="fas fa-layer-group"></i> All Components</a>
|
|
142
|
+
<a href="../showcase-complete.html#glass"><i class="fas fa-square"></i> Glass</a>
|
|
143
|
+
<a href="../showcase-complete.html#components"><i class="fas fa-shapes"></i> Standard</a>
|
|
144
|
+
<a href="../showcase-complete.html#navigation"><i class="fas fa-bars"></i> Navigation</a>
|
|
145
|
+
<a href="../showcase-complete.html#api-docs"><i class="fas fa-code"></i> API Docs</a>
|
|
146
|
+
</div>
|
|
147
|
+
</li>
|
|
148
|
+
<li class="has-submenu">
|
|
149
|
+
<a href="../extensions-showcase.html" class="active">
|
|
150
|
+
<i class="fas fa-puzzle-piece"></i> Extensions
|
|
151
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
152
|
+
</a>
|
|
153
|
+
<div class="submenu">
|
|
154
|
+
<a href="../extensions-showcase.html#gallery"><i class="fas fa-images"></i> Gallery</a>
|
|
155
|
+
<a href="../extensions-showcase.html#lightbox"><i class="fas fa-expand"></i> Lightbox</a>
|
|
156
|
+
<a href="../extensions-showcase.html#nsfw"><i class="fas fa-eye-slash"></i> NSFW Blur</a>
|
|
157
|
+
<a href="../extensions-showcase.html#social"><i class="fas fa-share-alt"></i> Social Links</a>
|
|
158
|
+
<a href="../extensions-showcase.html#countdown"><i class="fas fa-hourglass-half"></i> Countdown</a>
|
|
159
|
+
<a href="glsl-vortex.html"><i class="fas fa-hurricane"></i> GLSL Vortex</a>
|
|
160
|
+
<a href="particles-bg.html" class="active"><i class="fas fa-atom"></i> Particles BG</a>
|
|
161
|
+
</div>
|
|
162
|
+
</li>
|
|
163
|
+
<li class="has-submenu">
|
|
164
|
+
<a href="#">
|
|
165
|
+
<i class="fas fa-flask"></i> Examples
|
|
166
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
167
|
+
</a>
|
|
168
|
+
<div class="submenu">
|
|
169
|
+
<a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
170
|
+
<a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
171
|
+
<a href="../card.html"><i class="fas fa-square"></i> Cards</a>
|
|
172
|
+
<a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
173
|
+
<a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
174
|
+
<a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
175
|
+
<a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
176
|
+
<a href="nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
177
|
+
</div>
|
|
178
|
+
</li>
|
|
179
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
180
|
+
</ul>
|
|
181
|
+
</div>
|
|
182
|
+
</nav>
|
|
183
|
+
|
|
184
|
+
<canvas id="particles-canvas"></canvas>
|
|
185
|
+
|
|
186
|
+
<div class="ui-layer">
|
|
187
|
+
|
|
188
|
+
<!-- Controls -->
|
|
189
|
+
<div class="controls-panel">
|
|
190
|
+
<h2><i class="fas fa-sliders-h"></i> Particle Controls</h2>
|
|
191
|
+
|
|
192
|
+
<div class="control-row">
|
|
193
|
+
<label>Count</label>
|
|
194
|
+
<input type="range" id="ctrl-count" min="10" max="120" step="5" value="60">
|
|
195
|
+
<span class="val" id="val-count">60</span>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<div class="control-row">
|
|
199
|
+
<label>Speed</label>
|
|
200
|
+
<input type="range" id="ctrl-speed" min="0.1" max="3.0" step="0.05" value="1.0">
|
|
201
|
+
<span class="val" id="val-speed">1.00</span>
|
|
202
|
+
</div>
|
|
203
|
+
|
|
204
|
+
<div class="control-row">
|
|
205
|
+
<label>Line Distance</label>
|
|
206
|
+
<input type="range" id="ctrl-linedist" min="50" max="300" step="10" value="150">
|
|
207
|
+
<span class="val" id="val-linedist">150</span>
|
|
208
|
+
</div>
|
|
209
|
+
|
|
210
|
+
<div class="lewd-row">
|
|
211
|
+
<label for="ctrl-lewd"><i class="fas fa-exclamation-triangle"></i> Lewd Mode</label>
|
|
212
|
+
<span class="rating">18+</span>
|
|
213
|
+
<input type="checkbox" id="ctrl-lewd">
|
|
214
|
+
</div>
|
|
215
|
+
</div>
|
|
216
|
+
|
|
217
|
+
<!-- Code snippet -->
|
|
218
|
+
<div class="code-block">
|
|
219
|
+
<h3>Usage</h3>
|
|
220
|
+
<pre><code><canvas id="bg" style="position:fixed;inset:0;width:100%;height:100%;z-index:0;"></canvas>
|
|
221
|
+
<script src="src/lib/corrupted-particles.js"></script>
|
|
222
|
+
<script>
|
|
223
|
+
new CorruptedParticles(document.getElementById('bg'), {
|
|
224
|
+
count: 60, // desktop (mobile auto-halved)
|
|
225
|
+
speed: 1.0,
|
|
226
|
+
lineDistance: 150,
|
|
227
|
+
includeLewd: false, // 18+ contexts only
|
|
228
|
+
});
|
|
229
|
+
</script></code></pre>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<script src="../../src/lib/corrupted-particles.js"></script>
|
|
235
|
+
<script>
|
|
236
|
+
const canvas = document.getElementById('particles-canvas');
|
|
237
|
+
let cp = new CorruptedParticles(canvas);
|
|
238
|
+
|
|
239
|
+
function rebuildWithOptions() {
|
|
240
|
+
cp.destroy();
|
|
241
|
+
cp = new CorruptedParticles(canvas, {
|
|
242
|
+
count: parseInt(document.getElementById('ctrl-count').value),
|
|
243
|
+
speed: parseFloat(document.getElementById('ctrl-speed').value),
|
|
244
|
+
lineDistance: parseInt(document.getElementById('ctrl-linedist').value),
|
|
245
|
+
includeLewd: document.getElementById('ctrl-lewd').checked,
|
|
246
|
+
});
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
function wire(id, valId, fmt) {
|
|
250
|
+
const el = document.getElementById(id);
|
|
251
|
+
const v = document.getElementById(valId);
|
|
252
|
+
el.addEventListener('input', () => {
|
|
253
|
+
v.textContent = fmt ? parseFloat(el.value).toFixed(2) : el.value;
|
|
254
|
+
});
|
|
255
|
+
el.addEventListener('change', rebuildWithOptions);
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
wire('ctrl-count', 'val-count', false);
|
|
259
|
+
wire('ctrl-speed', 'val-speed', true);
|
|
260
|
+
wire('ctrl-linedist', 'val-linedist', false);
|
|
261
|
+
document.getElementById('ctrl-lewd').addEventListener('change', rebuildWithOptions);
|
|
262
|
+
</script>
|
|
263
|
+
</body>
|
|
264
|
+
</html>
|
|
@@ -0,0 +1,155 @@
|
|
|
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>Corrupted Theme - Multi-Gallery Demo</title>
|
|
7
|
+
<link rel="stylesheet" href="../../src/css/theme.css">
|
|
8
|
+
<style>
|
|
9
|
+
body {
|
|
10
|
+
background: var(--bg);
|
|
11
|
+
color: var(--text);
|
|
12
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
13
|
+
line-height: 1.6;
|
|
14
|
+
padding: 0;
|
|
15
|
+
margin: 0;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.demo {
|
|
19
|
+
max-width: 1200px;
|
|
20
|
+
margin: 0 auto;
|
|
21
|
+
padding: var(--spacing-xl);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.demo h1 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-sm);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.demo h2 {
|
|
30
|
+
color: var(--accent-light);
|
|
31
|
+
border-bottom: 1px solid var(--border);
|
|
32
|
+
padding-bottom: var(--spacing-sm);
|
|
33
|
+
margin-top: var(--spacing-2xl);
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.demo-note {
|
|
37
|
+
color: var(--text-secondary);
|
|
38
|
+
font-size: 0.9rem;
|
|
39
|
+
margin-bottom: var(--spacing-lg);
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
/* Placeholder images */
|
|
43
|
+
.gallery-item img {
|
|
44
|
+
width: 100%;
|
|
45
|
+
height: 200px;
|
|
46
|
+
object-fit: cover;
|
|
47
|
+
display: block;
|
|
48
|
+
background: var(--glass);
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.placeholder-img {
|
|
52
|
+
width: 100%;
|
|
53
|
+
height: 200px;
|
|
54
|
+
display: flex;
|
|
55
|
+
align-items: center;
|
|
56
|
+
justify-content: center;
|
|
57
|
+
background: var(--glass);
|
|
58
|
+
color: var(--text-secondary);
|
|
59
|
+
font-size: 0.9rem;
|
|
60
|
+
border-radius: var(--radius-md);
|
|
61
|
+
}
|
|
62
|
+
</style>
|
|
63
|
+
</head>
|
|
64
|
+
<body>
|
|
65
|
+
|
|
66
|
+
<div class="demo">
|
|
67
|
+
<h1>Multi-Gallery Demo</h1>
|
|
68
|
+
<p class="demo-note">
|
|
69
|
+
Two independent gallery instances on the same page.
|
|
70
|
+
Each has its own filters, lightbox, and state.
|
|
71
|
+
</p>
|
|
72
|
+
|
|
73
|
+
<!-- ==================== GALLERY 1 ==================== -->
|
|
74
|
+
<h2>Gallery 1 — Landscapes</h2>
|
|
75
|
+
|
|
76
|
+
<div class="filter-bar" id="filter-bar-1">
|
|
77
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
78
|
+
<button class="filter-btn" data-filter="mountains">Mountains</button>
|
|
79
|
+
<button class="filter-btn" data-filter="ocean">Ocean</button>
|
|
80
|
+
</div>
|
|
81
|
+
|
|
82
|
+
<div class="gallery-container" id="gallery-1">
|
|
83
|
+
<div class="gallery-item" data-tags="mountains">
|
|
84
|
+
<div class="placeholder-img">Mountain 1</div>
|
|
85
|
+
<div class="gallery-caption">Alpine Peak</div>
|
|
86
|
+
</div>
|
|
87
|
+
<div class="gallery-item" data-tags="ocean">
|
|
88
|
+
<div class="placeholder-img">Ocean 1</div>
|
|
89
|
+
<div class="gallery-caption">Pacific Coast</div>
|
|
90
|
+
</div>
|
|
91
|
+
<div class="gallery-item" data-tags="mountains">
|
|
92
|
+
<div class="placeholder-img">Mountain 2</div>
|
|
93
|
+
<div class="gallery-caption">Rocky Ridge</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="gallery-item" data-tags="ocean">
|
|
96
|
+
<div class="placeholder-img">Ocean 2</div>
|
|
97
|
+
<div class="gallery-caption">Coral Bay</div>
|
|
98
|
+
</div>
|
|
99
|
+
</div>
|
|
100
|
+
|
|
101
|
+
<!-- ==================== GALLERY 2 ==================== -->
|
|
102
|
+
<h2>Gallery 2 — Art</h2>
|
|
103
|
+
|
|
104
|
+
<div class="filter-bar" id="filter-bar-2">
|
|
105
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
106
|
+
<button class="filter-btn" data-filter="digital">Digital</button>
|
|
107
|
+
<button class="filter-btn" data-filter="traditional">Traditional</button>
|
|
108
|
+
</div>
|
|
109
|
+
|
|
110
|
+
<div class="gallery-container" id="gallery-2">
|
|
111
|
+
<div class="gallery-item" data-tags="digital">
|
|
112
|
+
<div class="placeholder-img">Digital Art 1</div>
|
|
113
|
+
<div class="gallery-caption">Neon Dreams</div>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="gallery-item" data-tags="traditional">
|
|
116
|
+
<div class="placeholder-img">Traditional Art 1</div>
|
|
117
|
+
<div class="gallery-caption">Ink Wash</div>
|
|
118
|
+
</div>
|
|
119
|
+
<div class="gallery-item" data-tags="digital">
|
|
120
|
+
<div class="placeholder-img">Digital Art 2</div>
|
|
121
|
+
<div class="gallery-caption">Glitch Portrait</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
|
|
125
|
+
<div class="glass-card" style="padding: 1.5rem; margin-top: var(--spacing-2xl);">
|
|
126
|
+
<h3 style="color: var(--accent);">How it works</h3>
|
|
127
|
+
<p>Each gallery is initialized as a separate instance with its own lightbox and filter state:</p>
|
|
128
|
+
<pre><code>const g1 = initGallery('#gallery-1');
|
|
129
|
+
const g2 = initGallery('#gallery-2');
|
|
130
|
+
|
|
131
|
+
// Destroy only one
|
|
132
|
+
g1.destroy();
|
|
133
|
+
// g2 continues working independently</code></pre>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<script type="module">
|
|
138
|
+
import { initGallery } from '../../src/lib/gallery.js';
|
|
139
|
+
|
|
140
|
+
// Initialize two independent galleries
|
|
141
|
+
const gallery1 = initGallery('#gallery-1', {
|
|
142
|
+
filterBarSelector: '#filter-bar-1 .filter-btn'
|
|
143
|
+
});
|
|
144
|
+
|
|
145
|
+
const gallery2 = initGallery('#gallery-2', {
|
|
146
|
+
filterBarSelector: '#filter-bar-2 .filter-btn'
|
|
147
|
+
});
|
|
148
|
+
|
|
149
|
+
// Expose for console debugging
|
|
150
|
+
window._gallery1 = gallery1;
|
|
151
|
+
window._gallery2 = gallery2;
|
|
152
|
+
</script>
|
|
153
|
+
|
|
154
|
+
</body>
|
|
155
|
+
</html>
|
package/examples/button.html
CHANGED
|
@@ -135,9 +135,12 @@
|
|
|
135
135
|
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
136
136
|
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
137
137
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
138
|
+
<a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
139
|
+
<a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
140
|
+
<a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
138
141
|
</div>
|
|
139
142
|
</li>
|
|
140
|
-
<li><a href="
|
|
143
|
+
<li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
141
144
|
</ul>
|
|
142
145
|
</div>
|
|
143
146
|
</nav>
|
|
@@ -438,7 +441,7 @@
|
|
|
438
441
|
</section>
|
|
439
442
|
|
|
440
443
|
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
441
|
-
<p>Button Component Documentation • Corrupted Theme v0.1.
|
|
444
|
+
<p>Button Component Documentation • Corrupted Theme v0.1.8</p>
|
|
442
445
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
443
446
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
444
447
|
</p>
|
package/examples/card.html
CHANGED
|
@@ -244,9 +244,12 @@
|
|
|
244
244
|
<a href="card.html" class="active"><i class="fas fa-square"></i> Cards</a>
|
|
245
245
|
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
246
246
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
247
|
+
<a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
248
|
+
<a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
249
|
+
<a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
247
250
|
</div>
|
|
248
251
|
</li>
|
|
249
|
-
<li><a href="
|
|
252
|
+
<li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
250
253
|
</ul>
|
|
251
254
|
</div>
|
|
252
255
|
</nav>
|
|
@@ -681,7 +684,7 @@
|
|
|
681
684
|
</section>
|
|
682
685
|
|
|
683
686
|
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
684
|
-
<p>Card Components Documentation • Corrupted Theme v0.1.
|
|
687
|
+
<p>Card Components Documentation • Corrupted Theme v0.1.8</p>
|
|
685
688
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
686
689
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
687
690
|
</p>
|
|
@@ -147,6 +147,8 @@
|
|
|
147
147
|
<a href="#nsfw"><i class="fas fa-eye-slash"></i> NSFW Blur</a>
|
|
148
148
|
<a href="#social"><i class="fas fa-share-alt"></i> Social Links</a>
|
|
149
149
|
<a href="#countdown"><i class="fas fa-hourglass-half"></i> Countdown</a>
|
|
150
|
+
<a href="advanced/glsl-vortex.html"><i class="fas fa-hurricane"></i> GLSL Vortex</a>
|
|
151
|
+
<a href="advanced/particles-bg.html"><i class="fas fa-atom"></i> Particles BG</a>
|
|
150
152
|
</div>
|
|
151
153
|
</li>
|
|
152
154
|
<li class="has-submenu">
|
|
@@ -160,9 +162,12 @@
|
|
|
160
162
|
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
161
163
|
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
162
164
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
165
|
+
<a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
166
|
+
<a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
167
|
+
<a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
163
168
|
</div>
|
|
164
169
|
</li>
|
|
165
|
-
<li><a href="
|
|
170
|
+
<li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
166
171
|
</ul>
|
|
167
172
|
</div>
|
|
168
173
|
</nav>
|
|
@@ -629,11 +634,45 @@
|
|
|
629
634
|
}</div>
|
|
630
635
|
</section>
|
|
631
636
|
|
|
637
|
+
<section class="showcase-section" id="vortex">
|
|
638
|
+
<h2><i class="fas fa-hurricane"></i> GLSL Vortex</h2>
|
|
639
|
+
<p class="showcase-description">WebGL1 raymarched spiral tunnel with quasar multi-color mode. Full-screen canvas background with configurable speed, intensity, rotation, and hue. Zero dependencies.</p>
|
|
640
|
+
<a href="advanced/glsl-vortex.html" class="btn btn-primary"><i class="fas fa-external-link-alt"></i> Open Demo</a>
|
|
641
|
+
<h3>Usage</h3>
|
|
642
|
+
<div class="code-example"><canvas id="vortex"></canvas>
|
|
643
|
+
<script src="src/lib/corrupted-vortex.js"></script>
|
|
644
|
+
<script>
|
|
645
|
+
new CorruptedVortex(document.getElementById('vortex'), {
|
|
646
|
+
speed: 1.0,
|
|
647
|
+
intensity: 1.0,
|
|
648
|
+
rotationRate: 1.0,
|
|
649
|
+
hue: null, // null = quasar multi-color mode
|
|
650
|
+
});
|
|
651
|
+
</script></div>
|
|
652
|
+
</section>
|
|
653
|
+
|
|
654
|
+
<section class="showcase-section" id="particles">
|
|
655
|
+
<h2><i class="fas fa-atom"></i> Particles BG</h2>
|
|
656
|
+
<p class="showcase-description">Canvas 2D floating corrupted Japanese phrase background. Three depth layers (far/mid/near), hover repel, click burst, phrase flickering, connection lines. SFW by default; opt-in lewd mode adds magenta/purple NSFW phrases.</p>
|
|
657
|
+
<a href="advanced/particles-bg.html" class="btn btn-primary"><i class="fas fa-external-link-alt"></i> Open Demo</a>
|
|
658
|
+
<h3>Usage</h3>
|
|
659
|
+
<div class="code-example"><canvas id="bg" style="position:fixed;inset:0;width:100%;height:100%;z-index:0;"></canvas>
|
|
660
|
+
<script src="src/lib/corrupted-particles.js"></script>
|
|
661
|
+
<script>
|
|
662
|
+
new CorruptedParticles(document.getElementById('bg'), {
|
|
663
|
+
count: 60,
|
|
664
|
+
speed: 1.0,
|
|
665
|
+
lineDistance: 150,
|
|
666
|
+
includeLewd: false, // 18+ opt-in only
|
|
667
|
+
});
|
|
668
|
+
</script></div>
|
|
669
|
+
</section>
|
|
670
|
+
|
|
632
671
|
<!-- Footer -->
|
|
633
672
|
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
634
673
|
<p><strong>Corrupted Theme Extensions</strong> • Production-tested components from whykusanagi.xyz</p>
|
|
635
674
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
636
|
-
<a href="
|
|
675
|
+
<a href="https://github.com/whykusanagi/corrupted-theme#readme" class="link">Documentation</a> •
|
|
637
676
|
<a href="showcase-complete.html" class="link">Full Component Library</a> •
|
|
638
677
|
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
639
678
|
</p>
|
package/examples/form.html
CHANGED
|
@@ -201,9 +201,12 @@
|
|
|
201
201
|
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
202
202
|
<a href="form.html" class="active"><i class="fas fa-edit"></i> Forms</a>
|
|
203
203
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
204
|
+
<a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
205
|
+
<a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
206
|
+
<a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
204
207
|
</div>
|
|
205
208
|
</li>
|
|
206
|
-
<li><a href="
|
|
209
|
+
<li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
207
210
|
</ul>
|
|
208
211
|
</div>
|
|
209
212
|
</nav>
|
|
@@ -550,7 +553,7 @@
|
|
|
550
553
|
</section>
|
|
551
554
|
|
|
552
555
|
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-2xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
553
|
-
<p>Form Components Documentation • Corrupted Theme v0.1.
|
|
556
|
+
<p>Form Components Documentation • Corrupted Theme v0.1.8</p>
|
|
554
557
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
555
558
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
556
559
|
</p>
|
package/examples/index.html
CHANGED
|
@@ -449,7 +449,22 @@
|
|
|
449
449
|
<a href="showcase-complete.html#api-docs"><i class="fas fa-code"></i> API Docs</a>
|
|
450
450
|
</div>
|
|
451
451
|
</li>
|
|
452
|
-
<li
|
|
452
|
+
<li class="has-submenu">
|
|
453
|
+
<a href="extensions-showcase.html">
|
|
454
|
+
<i class="fas fa-puzzle-piece"></i> Extensions
|
|
455
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
456
|
+
</a>
|
|
457
|
+
<div class="submenu">
|
|
458
|
+
<a href="extensions-showcase.html"><i class="fas fa-list"></i> All Extensions</a>
|
|
459
|
+
<a href="extensions-showcase.html#gallery"><i class="fas fa-images"></i> Gallery</a>
|
|
460
|
+
<a href="extensions-showcase.html#lightbox"><i class="fas fa-expand"></i> Lightbox</a>
|
|
461
|
+
<a href="extensions-showcase.html#nsfw"><i class="fas fa-eye-slash"></i> NSFW Blur</a>
|
|
462
|
+
<a href="extensions-showcase.html#social"><i class="fas fa-share-alt"></i> Social Links</a>
|
|
463
|
+
<a href="extensions-showcase.html#countdown"><i class="fas fa-hourglass-half"></i> Countdown</a>
|
|
464
|
+
<a href="advanced/glsl-vortex.html"><i class="fas fa-hurricane"></i> GLSL Vortex</a>
|
|
465
|
+
<a href="advanced/particles-bg.html"><i class="fas fa-atom"></i> Particles BG</a>
|
|
466
|
+
</div>
|
|
467
|
+
</li>
|
|
453
468
|
<li class="has-submenu">
|
|
454
469
|
<a href="#">
|
|
455
470
|
<i class="fas fa-flask"></i> Examples
|
|
@@ -461,9 +476,14 @@
|
|
|
461
476
|
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
462
477
|
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
463
478
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
479
|
+
<a href="basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
480
|
+
<a href="basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
481
|
+
<a href="advanced/glsl-vortex.html"><i class="fas fa-hurricane"></i> GLSL Vortex</a>
|
|
482
|
+
<a href="advanced/particles-bg.html"><i class="fas fa-atom"></i> Particles BG</a>
|
|
483
|
+
<a href="advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
464
484
|
</div>
|
|
465
485
|
</li>
|
|
466
|
-
<li><a href="
|
|
486
|
+
<li><a href="showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
467
487
|
</ul>
|
|
468
488
|
</div>
|
|
469
489
|
</nav>
|
|
@@ -473,7 +493,7 @@
|
|
|
473
493
|
<div class="hero-content">
|
|
474
494
|
<div class="hero-badge">
|
|
475
495
|
<i class="fas fa-sparkles"></i>
|
|
476
|
-
<span>v0.1.
|
|
496
|
+
<span>v0.1.8 — Production Ready</span>
|
|
477
497
|
</div>
|
|
478
498
|
<h1>Corrupted Theme</h1>
|
|
479
499
|
<p class="hero-description">
|
|
@@ -681,6 +701,14 @@
|
|
|
681
701
|
<i class="fas fa-share-alt"></i>
|
|
682
702
|
<span>Social Links</span>
|
|
683
703
|
</a>
|
|
704
|
+
<a href="advanced/glsl-vortex.html" class="quick-link">
|
|
705
|
+
<i class="fas fa-hurricane"></i>
|
|
706
|
+
<span>GLSL Vortex</span>
|
|
707
|
+
</a>
|
|
708
|
+
<a href="advanced/particles-bg.html" class="quick-link">
|
|
709
|
+
<i class="fas fa-atom"></i>
|
|
710
|
+
<span>Particles BG</span>
|
|
711
|
+
</a>
|
|
684
712
|
<a href="nikke-team-builder.html" class="quick-link">
|
|
685
713
|
<i class="fas fa-users"></i>
|
|
686
714
|
<span>Team Builder</span>
|
|
@@ -742,13 +770,13 @@
|
|
|
742
770
|
<footer class="landing-footer">
|
|
743
771
|
<div class="footer-content">
|
|
744
772
|
<div class="footer-links">
|
|
745
|
-
<a href="
|
|
746
|
-
<a href="
|
|
773
|
+
<a href="https://github.com/whykusanagi/corrupted-theme#readme"><i class="fas fa-book"></i> Documentation</a>
|
|
774
|
+
<a href="showcase-complete.html"><i class="fas fa-list"></i> Component Reference</a>
|
|
747
775
|
<a href="https://github.com/whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-github"></i> GitHub</a>
|
|
748
776
|
<a href="https://www.npmjs.com/package/@whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-npm"></i> npm</a>
|
|
749
777
|
</div>
|
|
750
778
|
<p class="footer-meta">
|
|
751
|
-
Corrupted Theme v0.1.
|
|
779
|
+
Corrupted Theme v0.1.8 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
|
|
752
780
|
<a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
|
|
753
781
|
</p>
|
|
754
782
|
</div>
|