@whykusanagi/corrupted-theme 0.1.3 → 0.1.5
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 +45 -7
- package/README.md +79 -15
- package/docs/governance/DESIGN_SYSTEM_GOVERNANCE.md +2 -2
- package/docs/governance/VERSION_REFERENCES.md +25 -25
- package/docs/platforms/NPM_PACKAGE.md +6 -6
- package/examples/advanced/nsfw-corruption.html +348 -0
- package/examples/basic/corrupted-text.html +254 -0
- package/examples/basic/typing-animation.html +344 -0
- package/examples/button.html +2 -2
- package/examples/card.html +2 -2
- package/examples/extensions-showcase.html +1 -1
- package/examples/form.html +2 -2
- package/examples/index.html +31 -5
- package/examples/layout.html +2 -2
- package/examples/nikke-team-builder.html +3 -3
- package/examples/showcase-complete.html +9 -9
- package/examples/showcase.html +3 -3
- package/package.json +13 -2
- package/src/core/corrupted-text.js +280 -0
- package/src/core/corruption-phrases.js +285 -0
- package/src/core/typing-animation.js +390 -0
- package/docs/CAPABILITIES.md +0 -209
- package/docs/FUTURE_WORK.md +0 -189
- package/docs/IMPLEMENTATION_VALIDATION.md +0 -401
- package/docs/LLM_PROVIDERS.md +0 -345
- package/docs/PERSONALITY.md +0 -128
- package/docs/ROUTING.md +0 -324
- package/docs/platforms/CLI_IMPLEMENTATION.md +0 -1025
|
@@ -0,0 +1,344 @@
|
|
|
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>Buffer Corruption - 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
|
+
.container {
|
|
11
|
+
max-width: 1000px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.example-group {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
background: var(--glass);
|
|
19
|
+
border: 1px solid var(--border);
|
|
20
|
+
border-radius: var(--radius-lg);
|
|
21
|
+
padding: var(--spacing-lg);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.example-group h3 {
|
|
25
|
+
color: var(--accent);
|
|
26
|
+
margin-bottom: var(--spacing-lg);
|
|
27
|
+
font-size: 1.25rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-area {
|
|
31
|
+
background: var(--bg-secondary);
|
|
32
|
+
border: 1px solid var(--border);
|
|
33
|
+
border-radius: var(--radius-md);
|
|
34
|
+
padding: var(--spacing-xl);
|
|
35
|
+
margin-bottom: var(--spacing-md);
|
|
36
|
+
min-height: 100px;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
justify-content: center;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.typing-output {
|
|
43
|
+
font-size: 1.25rem;
|
|
44
|
+
min-height: 40px;
|
|
45
|
+
letter-spacing: 1px;
|
|
46
|
+
font-family: 'Courier New', monospace;
|
|
47
|
+
text-align: center;
|
|
48
|
+
width: 100%;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.controls {
|
|
52
|
+
display: flex;
|
|
53
|
+
gap: var(--spacing-md);
|
|
54
|
+
margin-top: var(--spacing-md);
|
|
55
|
+
flex-wrap: wrap;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.code-block {
|
|
59
|
+
background: var(--bg);
|
|
60
|
+
border: 1px solid var(--border);
|
|
61
|
+
border-radius: var(--radius-md);
|
|
62
|
+
padding: var(--spacing-md);
|
|
63
|
+
margin-top: var(--spacing-md);
|
|
64
|
+
font-family: 'Courier New', monospace;
|
|
65
|
+
font-size: 0.875rem;
|
|
66
|
+
color: var(--text-secondary);
|
|
67
|
+
overflow-x: auto;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.info-badge {
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
align-items: center;
|
|
73
|
+
gap: var(--spacing-sm);
|
|
74
|
+
background: var(--glass);
|
|
75
|
+
border: 1px solid var(--border);
|
|
76
|
+
border-radius: var(--radius-full);
|
|
77
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
78
|
+
font-size: 0.875rem;
|
|
79
|
+
color: var(--text-secondary);
|
|
80
|
+
margin-bottom: var(--spacing-md);
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
.sfw-badge {
|
|
84
|
+
background: rgba(217, 79, 144, 0.2);
|
|
85
|
+
border-color: var(--corrupted-magenta2);
|
|
86
|
+
color: var(--corrupted-magenta2);
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.slider-container {
|
|
90
|
+
display: flex;
|
|
91
|
+
align-items: center;
|
|
92
|
+
gap: var(--spacing-md);
|
|
93
|
+
margin-top: var(--spacing-md);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.slider-container label {
|
|
97
|
+
min-width: 100px;
|
|
98
|
+
color: var(--text-secondary);
|
|
99
|
+
font-size: 0.875rem;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.slider-container input[type="range"] {
|
|
103
|
+
flex: 1;
|
|
104
|
+
max-width: 300px;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.slider-container span {
|
|
108
|
+
min-width: 120px;
|
|
109
|
+
color: var(--accent);
|
|
110
|
+
font-family: 'Courier New', monospace;
|
|
111
|
+
font-size: 0.875rem;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
input[type="text"] {
|
|
115
|
+
width: 100%;
|
|
116
|
+
padding: var(--spacing-md);
|
|
117
|
+
background: var(--bg);
|
|
118
|
+
border: 1px solid var(--border);
|
|
119
|
+
border-radius: var(--radius-md);
|
|
120
|
+
color: var(--text);
|
|
121
|
+
font-family: 'Courier New', monospace;
|
|
122
|
+
margin-bottom: var(--spacing-md);
|
|
123
|
+
font-size: 1rem;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
input[type="text"]:focus {
|
|
127
|
+
outline: none;
|
|
128
|
+
border-color: var(--accent);
|
|
129
|
+
box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.1);
|
|
130
|
+
}
|
|
131
|
+
</style>
|
|
132
|
+
</head>
|
|
133
|
+
<body>
|
|
134
|
+
<!-- Global Navigation -->
|
|
135
|
+
<nav class="navbar">
|
|
136
|
+
<div class="navbar-content">
|
|
137
|
+
<a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
138
|
+
<ul class="navbar-links">
|
|
139
|
+
<li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
|
|
140
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
|
|
141
|
+
<li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
|
|
142
|
+
<li class="has-submenu">
|
|
143
|
+
<a href="#" class="active">
|
|
144
|
+
<i class="fas fa-flask"></i> Examples
|
|
145
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
146
|
+
</a>
|
|
147
|
+
<div class="submenu">
|
|
148
|
+
<a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
149
|
+
<a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
150
|
+
<a href="../card.html"><i class="fas fa-square"></i> Cards</a>
|
|
151
|
+
<a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
152
|
+
<a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
153
|
+
<a href="corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
|
|
154
|
+
<a href="typing-animation.html" class="active"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
|
|
155
|
+
<a href="../advanced/nsfw-corruption.html"><i class="fas fa-exclamation-triangle"></i> NSFW (18+)</a>
|
|
156
|
+
</div>
|
|
157
|
+
</li>
|
|
158
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
159
|
+
</ul>
|
|
160
|
+
</div>
|
|
161
|
+
</nav>
|
|
162
|
+
|
|
163
|
+
<div class="container">
|
|
164
|
+
<h1><i class="fas fa-keyboard"></i> Buffer Corruption</h1>
|
|
165
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
166
|
+
Pattern 2: Phrase flickering with buffer corruption (SFW mode).
|
|
167
|
+
</p>
|
|
168
|
+
|
|
169
|
+
<div class="info-badge sfw-badge">
|
|
170
|
+
<i class="fas fa-check-circle"></i>
|
|
171
|
+
<span>SFW Mode - Cute & Playful</span>
|
|
172
|
+
</div>
|
|
173
|
+
|
|
174
|
+
<!-- Basic Buffer Corruption -->
|
|
175
|
+
<section id="basic" class="example-group">
|
|
176
|
+
<h3>System Message with Buffer Corruption</h3>
|
|
177
|
+
<p>Cute, playful, and atmospheric phrases flicker through before revealing the final text.</p>
|
|
178
|
+
|
|
179
|
+
<div class="demo-area">
|
|
180
|
+
<div class="typing-output" id="output1"></div>
|
|
181
|
+
</div>
|
|
182
|
+
|
|
183
|
+
<div class="controls">
|
|
184
|
+
<button class="btn" onclick="startExample1()">
|
|
185
|
+
<i class="fas fa-play"></i> Start
|
|
186
|
+
</button>
|
|
187
|
+
<button class="btn btn-secondary" onclick="stopExample1()">
|
|
188
|
+
<i class="fas fa-stop"></i> Stop
|
|
189
|
+
</button>
|
|
190
|
+
<button class="btn btn-ghost" onclick="settleExample1()">
|
|
191
|
+
<i class="fas fa-check"></i> Settle
|
|
192
|
+
</button>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<div class="code-block">import { TypingAnimation } from '@whykusanagi/corrupted-theme/typing-animation';
|
|
196
|
+
|
|
197
|
+
const element = document.getElementById('output');
|
|
198
|
+
const typing = new TypingAnimation(element, {
|
|
199
|
+
typingSpeed: 40, // Characters per second
|
|
200
|
+
glitchChance: 0.08, // 8% corruption chance
|
|
201
|
+
nsfw: false // SFW mode (default)
|
|
202
|
+
});
|
|
203
|
+
|
|
204
|
+
typing.start('Neural corruption detected...');</div>
|
|
205
|
+
</section>
|
|
206
|
+
|
|
207
|
+
<!-- Adjustable Settings -->
|
|
208
|
+
<section id="adjustable" class="example-group">
|
|
209
|
+
<h3>Adjustable Corruption Settings</h3>
|
|
210
|
+
<p>Control typing speed and corruption frequency in real-time.</p>
|
|
211
|
+
|
|
212
|
+
<div class="demo-area">
|
|
213
|
+
<div class="typing-output" id="output2"></div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<div class="slider-container">
|
|
217
|
+
<label for="speed"><i class="fas fa-tachometer-alt"></i> Speed:</label>
|
|
218
|
+
<input type="range" id="speed" min="10" max="100" value="40" class="form-range">
|
|
219
|
+
<span id="speedValue">40 chars/sec</span>
|
|
220
|
+
</div>
|
|
221
|
+
|
|
222
|
+
<div class="slider-container">
|
|
223
|
+
<label for="glitch"><i class="fas fa-bolt"></i> Corruption:</label>
|
|
224
|
+
<input type="range" id="glitch" min="0" max="30" value="8" class="form-range">
|
|
225
|
+
<span id="glitchValue">8%</span>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="controls">
|
|
229
|
+
<button class="btn" onclick="startExample2()">
|
|
230
|
+
<i class="fas fa-play"></i> Start with Settings
|
|
231
|
+
</button>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="code-block">const typing = new TypingAnimation(element, {
|
|
235
|
+
typingSpeed: 80, // Faster typing
|
|
236
|
+
glitchChance: 0.20 // More corruption
|
|
237
|
+
});</div>
|
|
238
|
+
</section>
|
|
239
|
+
|
|
240
|
+
<!-- Custom Messages -->
|
|
241
|
+
<section id="custom" class="example-group">
|
|
242
|
+
<h3>Custom Messages</h3>
|
|
243
|
+
<p>Type your own message to see it corrupted and revealed.</p>
|
|
244
|
+
|
|
245
|
+
<input type="text" id="customMessage" placeholder="Enter your message here...">
|
|
246
|
+
|
|
247
|
+
<div class="demo-area">
|
|
248
|
+
<div class="typing-output" id="output3"></div>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<div class="controls">
|
|
252
|
+
<button class="btn" onclick="startExample3()">
|
|
253
|
+
<i class="fas fa-keyboard"></i> Type Custom Message
|
|
254
|
+
</button>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
<div class="code-block">const message = document.getElementById('input').value;
|
|
258
|
+
typing.start(message);</div>
|
|
259
|
+
</section>
|
|
260
|
+
|
|
261
|
+
<!-- Component Info -->
|
|
262
|
+
<section class="example-group">
|
|
263
|
+
<h3><i class="fas fa-info-circle"></i> Component Information</h3>
|
|
264
|
+
<ul style="color: var(--text-secondary); line-height: 1.8;">
|
|
265
|
+
<li><strong>Type:</strong> Buffer Corruption / Phrase Flickering (Pattern 2)</li>
|
|
266
|
+
<li><strong>Mode:</strong> SFW (Default) - Cute, playful, atmospheric phrases</li>
|
|
267
|
+
<li><strong>Example Phrases:</strong> "かわいい", "nyaa~", "闇が...私を呼んでいる...", "Neural corruption detected..."</li>
|
|
268
|
+
<li><strong>Color:</strong> Magenta (#d94f90) for SFW corruption, White for final text</li>
|
|
269
|
+
<li><strong>Mental Model:</strong> Neural network decoding corrupted data buffer</li>
|
|
270
|
+
<li><strong>Script:</strong> <code>src/core/typing-animation.js</code></li>
|
|
271
|
+
</ul>
|
|
272
|
+
|
|
273
|
+
<div class="alert alert-info" style="margin-top: var(--spacing-md);">
|
|
274
|
+
<i class="fas fa-exclamation-circle"></i>
|
|
275
|
+
<strong>NSFW Mode:</strong> For explicit content examples, see
|
|
276
|
+
<a href="../advanced/nsfw-corruption.html" style="color: var(--accent);">advanced/nsfw-corruption.html</a> (18+ only)
|
|
277
|
+
</div>
|
|
278
|
+
</section>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<script type="module">
|
|
282
|
+
import { TypingAnimation } from '../../src/core/typing-animation.js';
|
|
283
|
+
|
|
284
|
+
// Example 1: Basic
|
|
285
|
+
const output1 = document.getElementById('output1');
|
|
286
|
+
let typing1 = new TypingAnimation(output1, {
|
|
287
|
+
typingSpeed: 40,
|
|
288
|
+
glitchChance: 0.08,
|
|
289
|
+
nsfw: false
|
|
290
|
+
});
|
|
291
|
+
|
|
292
|
+
window.startExample1 = () => {
|
|
293
|
+
typing1.start('Neural corruption detected... System stabilizing...');
|
|
294
|
+
};
|
|
295
|
+
|
|
296
|
+
window.stopExample1 = () => {
|
|
297
|
+
typing1.stop();
|
|
298
|
+
};
|
|
299
|
+
|
|
300
|
+
window.settleExample1 = () => {
|
|
301
|
+
typing1.settle('System Online');
|
|
302
|
+
};
|
|
303
|
+
|
|
304
|
+
// Example 2: Adjustable
|
|
305
|
+
const output2 = document.getElementById('output2');
|
|
306
|
+
const speedSlider = document.getElementById('speed');
|
|
307
|
+
const glitchSlider = document.getElementById('glitch');
|
|
308
|
+
const speedValue = document.getElementById('speedValue');
|
|
309
|
+
const glitchValue = document.getElementById('glitchValue');
|
|
310
|
+
|
|
311
|
+
speedSlider.addEventListener('input', (e) => {
|
|
312
|
+
speedValue.textContent = `${e.target.value} chars/sec`;
|
|
313
|
+
});
|
|
314
|
+
|
|
315
|
+
glitchSlider.addEventListener('input', (e) => {
|
|
316
|
+
glitchValue.textContent = `${e.target.value}%`;
|
|
317
|
+
});
|
|
318
|
+
|
|
319
|
+
window.startExample2 = () => {
|
|
320
|
+
const typing2 = new TypingAnimation(output2, {
|
|
321
|
+
typingSpeed: parseInt(speedSlider.value),
|
|
322
|
+
glitchChance: parseInt(glitchSlider.value) / 100,
|
|
323
|
+
nsfw: false
|
|
324
|
+
});
|
|
325
|
+
typing2.start('Loading data streams... Reality.exe has stopped responding...');
|
|
326
|
+
};
|
|
327
|
+
|
|
328
|
+
// Example 3: Custom
|
|
329
|
+
const output3 = document.getElementById('output3');
|
|
330
|
+
const customInput = document.getElementById('customMessage');
|
|
331
|
+
|
|
332
|
+
window.startExample3 = () => {
|
|
333
|
+
const message = customInput.value || 'Enter a message above!';
|
|
334
|
+
const typing3 = new TypingAnimation(output3, {
|
|
335
|
+
nsfw: false
|
|
336
|
+
});
|
|
337
|
+
typing3.start(message);
|
|
338
|
+
};
|
|
339
|
+
|
|
340
|
+
// Auto-start example 1 on load
|
|
341
|
+
setTimeout(() => startExample1(), 500);
|
|
342
|
+
</script>
|
|
343
|
+
</body>
|
|
344
|
+
</html>
|
package/examples/button.html
CHANGED
|
@@ -137,7 +137,7 @@
|
|
|
137
137
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
138
138
|
</div>
|
|
139
139
|
</li>
|
|
140
|
-
<li><a href="../
|
|
140
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
141
141
|
</ul>
|
|
142
142
|
</div>
|
|
143
143
|
</nav>
|
|
@@ -438,7 +438,7 @@
|
|
|
438
438
|
</section>
|
|
439
439
|
|
|
440
440
|
<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.
|
|
441
|
+
<p>Button Component Documentation • Corrupted Theme v0.1.4</p>
|
|
442
442
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
443
443
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
444
444
|
</p>
|
package/examples/card.html
CHANGED
|
@@ -246,7 +246,7 @@
|
|
|
246
246
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
247
247
|
</div>
|
|
248
248
|
</li>
|
|
249
|
-
<li><a href="../
|
|
249
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
250
250
|
</ul>
|
|
251
251
|
</div>
|
|
252
252
|
</nav>
|
|
@@ -681,7 +681,7 @@
|
|
|
681
681
|
</section>
|
|
682
682
|
|
|
683
683
|
<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.
|
|
684
|
+
<p>Card Components Documentation • Corrupted Theme v0.1.4</p>
|
|
685
685
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
686
686
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
687
687
|
</p>
|
|
@@ -162,7 +162,7 @@
|
|
|
162
162
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
163
163
|
</div>
|
|
164
164
|
</li>
|
|
165
|
-
<li><a href="../
|
|
165
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
166
166
|
</ul>
|
|
167
167
|
</div>
|
|
168
168
|
</nav>
|
package/examples/form.html
CHANGED
|
@@ -203,7 +203,7 @@
|
|
|
203
203
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
204
204
|
</div>
|
|
205
205
|
</li>
|
|
206
|
-
<li><a href="../
|
|
206
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
207
207
|
</ul>
|
|
208
208
|
</div>
|
|
209
209
|
</nav>
|
|
@@ -550,7 +550,7 @@
|
|
|
550
550
|
</section>
|
|
551
551
|
|
|
552
552
|
<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.
|
|
553
|
+
<p>Form Components Documentation • Corrupted Theme v0.1.4</p>
|
|
554
554
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
555
555
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
556
556
|
</p>
|
package/examples/index.html
CHANGED
|
@@ -463,7 +463,7 @@
|
|
|
463
463
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
464
464
|
</div>
|
|
465
465
|
</li>
|
|
466
|
-
<li><a href="../
|
|
466
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
467
467
|
</ul>
|
|
468
468
|
</div>
|
|
469
469
|
</nav>
|
|
@@ -473,7 +473,7 @@
|
|
|
473
473
|
<div class="hero-content">
|
|
474
474
|
<div class="hero-badge">
|
|
475
475
|
<i class="fas fa-sparkles"></i>
|
|
476
|
-
<span>v0.1.
|
|
476
|
+
<span>v0.1.4 — Production Ready</span>
|
|
477
477
|
</div>
|
|
478
478
|
<h1>Corrupted Theme</h1>
|
|
479
479
|
<p class="hero-description">
|
|
@@ -557,7 +557,7 @@
|
|
|
557
557
|
<span class="badge badge-primary">New</span>
|
|
558
558
|
</h3>
|
|
559
559
|
<p>
|
|
560
|
-
Production-tested modules: Gallery system with lightbox, NSFW content blur,
|
|
560
|
+
Production-tested modules: Gallery system with lightbox, NSFW content blur,
|
|
561
561
|
social links, countdown widgets, and more.
|
|
562
562
|
</p>
|
|
563
563
|
<div class="card-footer">
|
|
@@ -565,6 +565,24 @@
|
|
|
565
565
|
</div>
|
|
566
566
|
</a>
|
|
567
567
|
|
|
568
|
+
<!-- Corruption Components -->
|
|
569
|
+
<a href="basic/corrupted-text.html" class="category-card">
|
|
570
|
+
<div class="category-icon">
|
|
571
|
+
<i class="fas fa-terminal"></i>
|
|
572
|
+
</div>
|
|
573
|
+
<h3>
|
|
574
|
+
Corruption Effects
|
|
575
|
+
<span class="badge badge-primary">v1.1</span>
|
|
576
|
+
</h3>
|
|
577
|
+
<p>
|
|
578
|
+
Character-level glitch and phrase buffer corruption animations.
|
|
579
|
+
SFW mode (default) with optional NSFW mode. Neural network decoding aesthetic.
|
|
580
|
+
</p>
|
|
581
|
+
<div class="card-footer">
|
|
582
|
+
View examples <i class="fas fa-arrow-right"></i>
|
|
583
|
+
</div>
|
|
584
|
+
</a>
|
|
585
|
+
|
|
568
586
|
<!-- Glass Components -->
|
|
569
587
|
<a href="showcase-complete.html#glass" class="category-card">
|
|
570
588
|
<div class="category-icon">
|
|
@@ -667,6 +685,14 @@
|
|
|
667
685
|
<i class="fas fa-users"></i>
|
|
668
686
|
<span>Team Builder</span>
|
|
669
687
|
</a>
|
|
688
|
+
<a href="basic/corrupted-text.html" class="quick-link">
|
|
689
|
+
<i class="fas fa-terminal"></i>
|
|
690
|
+
<span>Character Corruption</span>
|
|
691
|
+
</a>
|
|
692
|
+
<a href="basic/typing-animation.html" class="quick-link">
|
|
693
|
+
<i class="fas fa-keyboard"></i>
|
|
694
|
+
<span>Buffer Corruption</span>
|
|
695
|
+
</a>
|
|
670
696
|
</div>
|
|
671
697
|
</section>
|
|
672
698
|
|
|
@@ -717,12 +743,12 @@
|
|
|
717
743
|
<div class="footer-content">
|
|
718
744
|
<div class="footer-links">
|
|
719
745
|
<a href="../README.md"><i class="fas fa-book"></i> Documentation</a>
|
|
720
|
-
<a href="../
|
|
746
|
+
<a href="../showcase-complete.html"><i class="fas fa-list"></i> Component Reference</a>
|
|
721
747
|
<a href="https://github.com/whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-github"></i> GitHub</a>
|
|
722
748
|
<a href="https://www.npmjs.com/package/@whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-npm"></i> npm</a>
|
|
723
749
|
</div>
|
|
724
750
|
<p class="footer-meta">
|
|
725
|
-
Corrupted Theme v0.1.
|
|
751
|
+
Corrupted Theme v0.1.4 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
|
|
726
752
|
<a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
|
|
727
753
|
</p>
|
|
728
754
|
</div>
|
package/examples/layout.html
CHANGED
|
@@ -189,7 +189,7 @@
|
|
|
189
189
|
<a href="layout.html" class="active"><i class="fas fa-columns"></i> Layouts</a>
|
|
190
190
|
</div>
|
|
191
191
|
</li>
|
|
192
|
-
<li><a href="../
|
|
192
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
193
193
|
</ul>
|
|
194
194
|
</div>
|
|
195
195
|
</nav>
|
|
@@ -511,7 +511,7 @@
|
|
|
511
511
|
</section>
|
|
512
512
|
|
|
513
513
|
<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);">
|
|
514
|
-
<p>Layout Patterns Documentation • Corrupted Theme v0.1.
|
|
514
|
+
<p>Layout Patterns Documentation • Corrupted Theme v0.1.4</p>
|
|
515
515
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
516
516
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
517
517
|
</p>
|
|
@@ -196,7 +196,7 @@
|
|
|
196
196
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
197
197
|
</div>
|
|
198
198
|
</li>
|
|
199
|
-
<li><a href="../
|
|
199
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
200
200
|
</ul>
|
|
201
201
|
</div>
|
|
202
202
|
</nav>
|
|
@@ -563,10 +563,10 @@
|
|
|
563
563
|
</section>
|
|
564
564
|
|
|
565
565
|
<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);">
|
|
566
|
-
<p>Nikke Team Builder Example • Corrupted Theme v0.1.
|
|
566
|
+
<p>Nikke Team Builder Example • Corrupted Theme v0.1.4</p>
|
|
567
567
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
568
568
|
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a> •
|
|
569
|
-
<a href="../
|
|
569
|
+
<a href="../showcase-complete.html#nikke" style="color: var(--accent); text-decoration: none;">Documentation</a>
|
|
570
570
|
</p>
|
|
571
571
|
</footer>
|
|
572
572
|
</div>
|
|
@@ -149,7 +149,7 @@
|
|
|
149
149
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
150
150
|
</div>
|
|
151
151
|
</li>
|
|
152
|
-
<li><a href="../
|
|
152
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
153
153
|
</ul>
|
|
154
154
|
</div>
|
|
155
155
|
</nav>
|
|
@@ -1130,9 +1130,9 @@ const theme = {
|
|
|
1130
1130
|
</div>
|
|
1131
1131
|
</section>
|
|
1132
1132
|
|
|
1133
|
-
<!-- Character-Level Corruption (NEW in v0.1.
|
|
1133
|
+
<!-- Character-Level Corruption (NEW in v0.1.4) -->
|
|
1134
1134
|
<section class="showcase-section" id="character-corruption">
|
|
1135
|
-
<h2><i class="fas fa-language"></i> Character-Level Corruption <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.
|
|
1135
|
+
<h2><i class="fas fa-language"></i> Character-Level Corruption <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.4</span></h2>
|
|
1136
1136
|
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
1137
1137
|
<strong>CLI Brand Parity:</strong> Matches Celeste CLI's translation-failure aesthetic. Japanese characters are mixed <strong>INTO</strong> English words at the character level (not word replacement).
|
|
1138
1138
|
</p>
|
|
@@ -1312,9 +1312,9 @@ const theme = {
|
|
|
1312
1312
|
</div>
|
|
1313
1313
|
</section>
|
|
1314
1314
|
|
|
1315
|
-
<!-- New Bootstrap Components (v0.1.
|
|
1315
|
+
<!-- New Bootstrap Components (v0.1.4) -->
|
|
1316
1316
|
<section class="showcase-section" id="new-components">
|
|
1317
|
-
<h2><i class="fas fa-plus-circle"></i> New Bootstrap Components <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.
|
|
1317
|
+
<h2><i class="fas fa-plus-circle"></i> New Bootstrap Components <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.4</span></h2>
|
|
1318
1318
|
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
1319
1319
|
<strong>1:1 Bootstrap Parity:</strong> 25+ new components added for complete coverage. Build sites without writing custom CSS!
|
|
1320
1320
|
</p>
|
|
@@ -1694,10 +1694,10 @@ const theme = {
|
|
|
1694
1694
|
|
|
1695
1695
|
<!-- Footer -->
|
|
1696
1696
|
<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);">
|
|
1697
|
-
<p><strong>Corrupted Theme</strong> v0.1.
|
|
1697
|
+
<p><strong>Corrupted Theme</strong> v0.1.4 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
|
|
1698
1698
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
1699
1699
|
<a href="../README.md" class="link">Documentation</a> •
|
|
1700
|
-
<a href="
|
|
1700
|
+
<a href="#customization" class="link">Customization</a> •
|
|
1701
1701
|
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
1702
1702
|
</p>
|
|
1703
1703
|
</footer>
|
|
@@ -1832,7 +1832,7 @@ const theme = {
|
|
|
1832
1832
|
document.addEventListener('DOMContentLoaded', initGlitchKanji);
|
|
1833
1833
|
</script>
|
|
1834
1834
|
|
|
1835
|
-
<!-- NEW v0.1.
|
|
1835
|
+
<!-- NEW v0.1.4: Character Corruption & Components -->
|
|
1836
1836
|
<script type="module">
|
|
1837
1837
|
// Import character corruption module
|
|
1838
1838
|
import { corruptTextJapanese, INTENSITY, initAutoCorruption } from '../src/lib/character-corruption.js';
|
|
@@ -1919,7 +1919,7 @@ const theme = {
|
|
|
1919
1919
|
|
|
1920
1920
|
// Auto-show welcome message on page load
|
|
1921
1921
|
setTimeout(() => {
|
|
1922
|
-
toast.success('Welcome to Corrupted Theme v0.1.
|
|
1922
|
+
toast.success('Welcome to Corrupted Theme v0.1.4!', 'Welcome', 5000);
|
|
1923
1923
|
}, 1000);
|
|
1924
1924
|
</script>
|
|
1925
1925
|
</body>
|
package/examples/showcase.html
CHANGED
|
@@ -151,7 +151,7 @@
|
|
|
151
151
|
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
152
152
|
</div>
|
|
153
153
|
</li>
|
|
154
|
-
<li><a href="../
|
|
154
|
+
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
|
|
155
155
|
</ul>
|
|
156
156
|
</div>
|
|
157
157
|
</nav>
|
|
@@ -462,10 +462,10 @@ const theme = {
|
|
|
462
462
|
|
|
463
463
|
<!-- Footer -->
|
|
464
464
|
<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);">
|
|
465
|
-
<p><strong>Corrupted Theme</strong> v0.1.
|
|
465
|
+
<p><strong>Corrupted Theme</strong> v0.1.4 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
|
|
466
466
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
467
467
|
<a href="../README.md" class="link">Documentation</a> •
|
|
468
|
-
<a href="
|
|
468
|
+
<a href="#customization" class="link">Customization</a> •
|
|
469
469
|
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
470
470
|
</p>
|
|
471
471
|
</footer>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@whykusanagi/corrupted-theme",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"description": "A dark, glassmorphic design system with pink/purple accents. Perfect for creating modern, visually striking web applications.",
|
|
6
6
|
"main": "src/css/theme.css",
|
|
@@ -28,7 +28,18 @@
|
|
|
28
28
|
"files": [
|
|
29
29
|
"src",
|
|
30
30
|
"scripts",
|
|
31
|
-
"docs",
|
|
31
|
+
"docs/brand",
|
|
32
|
+
"docs/components",
|
|
33
|
+
"docs/governance",
|
|
34
|
+
"docs/standards",
|
|
35
|
+
"docs/platforms/NPM_PACKAGE.md",
|
|
36
|
+
"docs/platforms/WEB_IMPLEMENTATION.md",
|
|
37
|
+
"docs/platforms/COMPONENT_MAPPING.md",
|
|
38
|
+
"docs/COMPONENTS_REFERENCE.md",
|
|
39
|
+
"docs/CORRUPTION_PHRASES.md",
|
|
40
|
+
"docs/CHARACTER_LEVEL_CORRUPTION.md",
|
|
41
|
+
"docs/STYLE_GUIDE.md",
|
|
42
|
+
"docs/ROADMAP.md",
|
|
32
43
|
"examples",
|
|
33
44
|
"Dockerfile",
|
|
34
45
|
"docker-entrypoint.sh",
|