@whykusanagi/corrupted-theme 0.1.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/CHANGELOG.md +339 -0
- package/Dockerfile +32 -0
- package/LICENSE +21 -0
- package/README.md +399 -0
- package/docker-entrypoint.sh +48 -0
- package/docs/COMPONENTS_REFERENCE.md +659 -0
- package/examples/.env.example +100 -0
- package/examples/button.html +436 -0
- package/examples/card.html +678 -0
- package/examples/form.html +555 -0
- package/examples/index.html +520 -0
- package/examples/layout.html +507 -0
- package/examples/nikke-team-builder.html +580 -0
- package/examples/showcase-complete.html +1071 -0
- package/examples/showcase.html +502 -0
- package/package.json +70 -0
- package/scripts/celeste-proxy-server.js +99 -0
- package/scripts/static-server.js +113 -0
- package/src/css/animations.css +649 -0
- package/src/css/components.css +1441 -0
- package/src/css/glassmorphism.css +217 -0
- package/src/css/nikke-utilities.css +530 -0
- package/src/css/theme.css +478 -0
- package/src/css/typography.css +198 -0
- package/src/css/utilities.css +239 -0
- package/src/css/variables.css +73 -0
- package/src/lib/celeste-proxy.js +215 -0
- package/src/lib/celeste-widget.js +1089 -0
- package/src/lib/corrupted-text.js +193 -0
- package/src/lib/corruption-loading.js +405 -0
|
@@ -0,0 +1,1071 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en" data-no-corruption-loading>
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Corrupted Theme - Complete Component Showcase</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
|
+
<link rel="stylesheet" href="../src/css/nikke-utilities.css">
|
|
10
|
+
<script src="../src/lib/corrupted-text.js"></script>
|
|
11
|
+
<script src="../src/lib/corruption-loading.js"></script>
|
|
12
|
+
<style>
|
|
13
|
+
body {
|
|
14
|
+
background: var(--bg);
|
|
15
|
+
color: var(--text);
|
|
16
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
padding: 0;
|
|
19
|
+
margin: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.showcase {
|
|
23
|
+
max-width: 1400px;
|
|
24
|
+
margin: 0 auto;
|
|
25
|
+
padding: var(--spacing-xl);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.showcase-section {
|
|
29
|
+
margin-bottom: var(--spacing-2xl);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.showcase-section h2 {
|
|
33
|
+
color: var(--accent);
|
|
34
|
+
margin-bottom: var(--spacing-lg);
|
|
35
|
+
padding-bottom: var(--spacing-md);
|
|
36
|
+
border-bottom: 2px solid var(--border);
|
|
37
|
+
font-size: 2rem;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.showcase-section h3 {
|
|
41
|
+
color: var(--text);
|
|
42
|
+
margin-top: var(--spacing-lg);
|
|
43
|
+
margin-bottom: var(--spacing-md);
|
|
44
|
+
font-size: 1.25rem;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.showcase-grid {
|
|
48
|
+
display: grid;
|
|
49
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
50
|
+
gap: var(--spacing-lg);
|
|
51
|
+
margin-bottom: var(--spacing-lg);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.code-example {
|
|
55
|
+
background: var(--glass-darker);
|
|
56
|
+
border: 1px solid var(--border);
|
|
57
|
+
border-radius: var(--radius-lg);
|
|
58
|
+
padding: var(--spacing-md);
|
|
59
|
+
margin-top: var(--spacing-md);
|
|
60
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
61
|
+
font-size: 0.875rem;
|
|
62
|
+
overflow-x: auto;
|
|
63
|
+
color: var(--text-secondary);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.demo-container {
|
|
67
|
+
background: var(--glass);
|
|
68
|
+
border: 1px solid var(--border);
|
|
69
|
+
border-radius: var(--radius-lg);
|
|
70
|
+
padding: var(--spacing-lg);
|
|
71
|
+
display: flex;
|
|
72
|
+
flex-wrap: wrap;
|
|
73
|
+
gap: var(--spacing-md);
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: center;
|
|
76
|
+
margin-bottom: var(--spacing-md);
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.hero {
|
|
80
|
+
background: var(--gradient-accent);
|
|
81
|
+
color: white;
|
|
82
|
+
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
83
|
+
border-radius: var(--radius-xl);
|
|
84
|
+
text-align: center;
|
|
85
|
+
margin-bottom: var(--spacing-2xl);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.hero h1 {
|
|
89
|
+
font-size: 3rem;
|
|
90
|
+
margin-bottom: var(--spacing-md);
|
|
91
|
+
color: white;
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
.hero p {
|
|
95
|
+
font-size: 1.2rem;
|
|
96
|
+
margin-bottom: var(--spacing-md);
|
|
97
|
+
opacity: 0.95;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.bg-demo {
|
|
101
|
+
background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=800');
|
|
102
|
+
background-size: cover;
|
|
103
|
+
background-position: center;
|
|
104
|
+
min-height: 300px;
|
|
105
|
+
border-radius: var(--radius-lg);
|
|
106
|
+
padding: var(--spacing-xl);
|
|
107
|
+
display: flex;
|
|
108
|
+
align-items: center;
|
|
109
|
+
justify-content: center;
|
|
110
|
+
color: white;
|
|
111
|
+
text-align: center;
|
|
112
|
+
}
|
|
113
|
+
</style>
|
|
114
|
+
</head>
|
|
115
|
+
<body>
|
|
116
|
+
<!-- Navigation -->
|
|
117
|
+
<nav class="navbar">
|
|
118
|
+
<div class="navbar-content">
|
|
119
|
+
<a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
120
|
+
<ul class="navbar-links">
|
|
121
|
+
<li><a href="#glass-components" class="active">Glass</a></li>
|
|
122
|
+
<li><a href="#components">Components</a></li>
|
|
123
|
+
<li><a href="#navigation">Navigation</a></li>
|
|
124
|
+
<li><a href="#api-docs">API Docs</a></li>
|
|
125
|
+
<li><a href="#nikke">Nikke</a></li>
|
|
126
|
+
<li><a href="#corrupted">Corrupted</a></li>
|
|
127
|
+
<li><a href="#utilities">Utilities</a></li>
|
|
128
|
+
</ul>
|
|
129
|
+
</div>
|
|
130
|
+
</nav>
|
|
131
|
+
|
|
132
|
+
<div class="showcase">
|
|
133
|
+
<!-- Hero Section -->
|
|
134
|
+
<section class="hero">
|
|
135
|
+
<h1>Corrupted Theme</h1>
|
|
136
|
+
<p>Complete Component Library</p>
|
|
137
|
+
<p style="font-size: 1rem; opacity: 0.9;">
|
|
138
|
+
A comprehensive dark design system with glassmorphism effects, ready for any application
|
|
139
|
+
</p>
|
|
140
|
+
</section>
|
|
141
|
+
|
|
142
|
+
<!-- Glass Components Section -->
|
|
143
|
+
<section class="showcase-section" id="glass-components">
|
|
144
|
+
<h2><i class="fas fa-cube"></i> Glass Components</h2>
|
|
145
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
146
|
+
Reusable glass components perfect for API documentation, dashboards, and modern web applications.
|
|
147
|
+
</p>
|
|
148
|
+
|
|
149
|
+
<h3>Glass Card</h3>
|
|
150
|
+
<div class="showcase-grid">
|
|
151
|
+
<div class="glass-card" style="padding: var(--spacing-lg);">
|
|
152
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--accent);">Glass Card</h4>
|
|
153
|
+
<p>This is a glass-card component with backdrop blur and hover effects.</p>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="glass-card" style="padding: var(--spacing-lg);">
|
|
156
|
+
<h4 style="margin-bottom: var(--spacing-md); color: var(--accent);">Hover Me</h4>
|
|
157
|
+
<p>Hover over this card to see the enhanced shadow and border effects.</p>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<h3>Glass Input</h3>
|
|
162
|
+
<div style="max-width: 500px; margin-bottom: var(--spacing-lg);">
|
|
163
|
+
<input type="text" class="glass-input" placeholder="Enter your name" style="width: 100%; margin-bottom: var(--spacing-md);">
|
|
164
|
+
<textarea class="glass-input" rows="4" placeholder="Your message here..." style="width: 100%; margin-bottom: var(--spacing-md);"></textarea>
|
|
165
|
+
<select class="glass-input" style="width: 100%;">
|
|
166
|
+
<option>Select a category</option>
|
|
167
|
+
<option>Feature Request</option>
|
|
168
|
+
<option>Bug Report</option>
|
|
169
|
+
</select>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<h3>Glass Button</h3>
|
|
173
|
+
<div class="demo-container">
|
|
174
|
+
<button class="glass-button"><i class="fas fa-rocket"></i> Glass Button</button>
|
|
175
|
+
<a href="#" class="glass-button"><i class="fas fa-link"></i> Link Button</a>
|
|
176
|
+
<button class="glass-button" disabled>Disabled</button>
|
|
177
|
+
</div>
|
|
178
|
+
|
|
179
|
+
<h3>Glass Code</h3>
|
|
180
|
+
<pre class="glass-code" style="margin-bottom: var(--spacing-md);">const example = "Hello, World!";
|
|
181
|
+
const theme = {
|
|
182
|
+
accent: "#d94f90",
|
|
183
|
+
glass: "rgba(20, 12, 40, 0.7)"
|
|
184
|
+
};</pre>
|
|
185
|
+
</section>
|
|
186
|
+
|
|
187
|
+
<!-- Modals Section -->
|
|
188
|
+
<section class="showcase-section" id="components">
|
|
189
|
+
<h2><i class="fas fa-window-maximize"></i> Modals & Overlays</h2>
|
|
190
|
+
|
|
191
|
+
<div class="demo-container">
|
|
192
|
+
<button class="btn" onclick="openModal('demo-modal')">Open Modal</button>
|
|
193
|
+
<button class="btn btn-secondary" onclick="openModal('large-modal')">Large Modal</button>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<!-- Modal -->
|
|
197
|
+
<div class="modal-overlay" id="demo-modal">
|
|
198
|
+
<div class="modal">
|
|
199
|
+
<div class="modal-header">
|
|
200
|
+
<h3 class="modal-title">Modal Title</h3>
|
|
201
|
+
<button class="modal-close" onclick="closeModal('demo-modal')">×</button>
|
|
202
|
+
</div>
|
|
203
|
+
<div class="modal-body">
|
|
204
|
+
<p>This is a modal dialog with glass effect. You can add any content here.</p>
|
|
205
|
+
<p>Modals are perfect for confirmations, forms, or additional information.</p>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="modal-footer">
|
|
208
|
+
<button class="btn btn-secondary" onclick="closeModal('demo-modal')">Cancel</button>
|
|
209
|
+
<button class="btn" onclick="closeModal('demo-modal')">Confirm</button>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</div>
|
|
213
|
+
|
|
214
|
+
<div class="modal-overlay" id="large-modal">
|
|
215
|
+
<div class="modal" style="max-width: 800px;">
|
|
216
|
+
<div class="modal-header">
|
|
217
|
+
<h3 class="modal-title">Large Modal</h3>
|
|
218
|
+
<button class="modal-close" onclick="closeModal('large-modal')">×</button>
|
|
219
|
+
</div>
|
|
220
|
+
<div class="modal-body">
|
|
221
|
+
<p>This is a larger modal for more content.</p>
|
|
222
|
+
<div class="card">
|
|
223
|
+
<h4>Card Inside Modal</h4>
|
|
224
|
+
<p>You can nest components inside modals.</p>
|
|
225
|
+
</div>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="modal-footer">
|
|
228
|
+
<button class="btn" onclick="closeModal('large-modal')">Close</button>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
</section>
|
|
233
|
+
|
|
234
|
+
<!-- Loading & Progress Section -->
|
|
235
|
+
<section class="showcase-section">
|
|
236
|
+
<h2><i class="fas fa-spinner"></i> Loading & Progress</h2>
|
|
237
|
+
|
|
238
|
+
<h3>Spinners</h3>
|
|
239
|
+
<div class="demo-container">
|
|
240
|
+
<div class="spinner sm"></div>
|
|
241
|
+
<div class="spinner"></div>
|
|
242
|
+
<div class="spinner lg"></div>
|
|
243
|
+
</div>
|
|
244
|
+
|
|
245
|
+
<h3>Loading Bar</h3>
|
|
246
|
+
<div style="max-width: 600px; margin-bottom: var(--spacing-lg);">
|
|
247
|
+
<div class="loading-bar">
|
|
248
|
+
<div class="loading-bar-fill"></div>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<h3>Progress Bars</h3>
|
|
253
|
+
<div style="max-width: 600px; margin-bottom: var(--spacing-lg);">
|
|
254
|
+
<div class="progress" style="margin-bottom: var(--spacing-md);">
|
|
255
|
+
<div class="progress-bar" style="width: 25%;">25%</div>
|
|
256
|
+
</div>
|
|
257
|
+
<div class="progress" style="margin-bottom: var(--spacing-md);">
|
|
258
|
+
<div class="progress-bar" style="width: 50%;">50%</div>
|
|
259
|
+
</div>
|
|
260
|
+
<div class="progress" style="margin-bottom: var(--spacing-md);">
|
|
261
|
+
<div class="progress-bar success" style="width: 75%;">75%</div>
|
|
262
|
+
</div>
|
|
263
|
+
<div class="progress">
|
|
264
|
+
<div class="progress-bar" style="width: 100%;">100%</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</section>
|
|
268
|
+
|
|
269
|
+
<!-- Tooltips Section -->
|
|
270
|
+
<section class="showcase-section">
|
|
271
|
+
<h2><i class="fas fa-comment"></i> Tooltips</h2>
|
|
272
|
+
|
|
273
|
+
<div class="demo-container">
|
|
274
|
+
<span class="tooltip">
|
|
275
|
+
Hover me (top)
|
|
276
|
+
<span class="tooltip-content top">Tooltip on top</span>
|
|
277
|
+
</span>
|
|
278
|
+
<span class="tooltip">
|
|
279
|
+
Hover me (bottom)
|
|
280
|
+
<span class="tooltip-content bottom">Tooltip on bottom</span>
|
|
281
|
+
</span>
|
|
282
|
+
<span class="tooltip">
|
|
283
|
+
Hover me (left)
|
|
284
|
+
<span class="tooltip-content left">Tooltip on left</span>
|
|
285
|
+
</span>
|
|
286
|
+
<span class="tooltip">
|
|
287
|
+
Hover me (right)
|
|
288
|
+
<span class="tooltip-content right">Tooltip on right</span>
|
|
289
|
+
</span>
|
|
290
|
+
</div>
|
|
291
|
+
</section>
|
|
292
|
+
|
|
293
|
+
<!-- Navigation Menus Section -->
|
|
294
|
+
<section class="showcase-section" id="navigation">
|
|
295
|
+
<h2><i class="fas fa-bars"></i> Navigation Menus</h2>
|
|
296
|
+
|
|
297
|
+
<h3>Navbar (Sticky Navigation)</h3>
|
|
298
|
+
<div class="card" style="margin-bottom: var(--spacing-lg);">
|
|
299
|
+
<p style="margin-bottom: var(--spacing-md); color: var(--text-secondary);">
|
|
300
|
+
The navbar is sticky and stays at the top when scrolling. It includes logo and navigation links with hover effects.
|
|
301
|
+
</p>
|
|
302
|
+
<nav class="navbar" style="position: relative; margin: -1.5rem -1.5rem 1.5rem -1.5rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0;">
|
|
303
|
+
<div class="navbar-content">
|
|
304
|
+
<a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
305
|
+
<ul class="navbar-links">
|
|
306
|
+
<li><a href="#glass-components" class="active"><i class="fas fa-cube"></i> Glass</a></li>
|
|
307
|
+
<li><a href="#components"><i class="fas fa-shapes"></i> Components</a></li>
|
|
308
|
+
<li><a href="#navigation"><i class="fas fa-bars"></i> Navigation</a></li>
|
|
309
|
+
<li><a href="#api-docs"><i class="fas fa-code"></i> API Docs</a></li>
|
|
310
|
+
</ul>
|
|
311
|
+
</div>
|
|
312
|
+
</nav>
|
|
313
|
+
<div class="code-example">
|
|
314
|
+
<nav class="navbar">
|
|
315
|
+
<div class="navbar-content">
|
|
316
|
+
<a href="#" class="navbar-logo">
|
|
317
|
+
<i class="fas fa-palette"></i> Logo
|
|
318
|
+
</a>
|
|
319
|
+
<ul class="navbar-links">
|
|
320
|
+
<li><a href="#home" class="active">Home</a></li>
|
|
321
|
+
<li><a href="#about">About</a></li>
|
|
322
|
+
<li><a href="#contact">Contact</a></li>
|
|
323
|
+
</ul>
|
|
324
|
+
</div>
|
|
325
|
+
</nav>
|
|
326
|
+
</div>
|
|
327
|
+
</div>
|
|
328
|
+
|
|
329
|
+
<h3>Navbar with Submenu</h3>
|
|
330
|
+
<div class="card" style="margin-bottom: var(--spacing-lg);">
|
|
331
|
+
<nav class="navbar" style="position: relative; margin: -1.5rem -1.5rem 1.5rem -1.5rem; border-radius: var(--radius-lg) var(--radius-lg) 0 0;">
|
|
332
|
+
<div class="navbar-content">
|
|
333
|
+
<a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Theme</a>
|
|
334
|
+
<ul class="navbar-links">
|
|
335
|
+
<li><a href="#"><i class="fas fa-home"></i> Home</a></li>
|
|
336
|
+
<li class="has-submenu">
|
|
337
|
+
<a href="#"><i class="fas fa-folder"></i> Products <i class="fas fa-chevron-down" style="font-size: 0.7rem; margin-left: 0.25rem;"></i></a>
|
|
338
|
+
<div class="submenu">
|
|
339
|
+
<a href="#"><i class="fas fa-box"></i> Product 1</a>
|
|
340
|
+
<a href="#"><i class="fas fa-box"></i> Product 2</a>
|
|
341
|
+
<a href="#"><i class="fas fa-box"></i> Product 3</a>
|
|
342
|
+
</div>
|
|
343
|
+
</li>
|
|
344
|
+
<li><a href="#"><i class="fas fa-info"></i> About</a></li>
|
|
345
|
+
</ul>
|
|
346
|
+
</div>
|
|
347
|
+
</nav>
|
|
348
|
+
<div class="code-example">
|
|
349
|
+
<ul class="navbar-links">
|
|
350
|
+
<li><a href="#">Home</a></li>
|
|
351
|
+
<li class="has-submenu">
|
|
352
|
+
<a href="#">Products <i class="fas fa-chevron-down"></i></a>
|
|
353
|
+
<div class="submenu">
|
|
354
|
+
<a href="#">Product 1</a>
|
|
355
|
+
<a href="#">Product 2</a>
|
|
356
|
+
</div>
|
|
357
|
+
</li>
|
|
358
|
+
</ul>
|
|
359
|
+
</div>
|
|
360
|
+
</div>
|
|
361
|
+
|
|
362
|
+
<h3>Dropdown Menus</h3>
|
|
363
|
+
<div class="demo-container">
|
|
364
|
+
<div class="dropdown">
|
|
365
|
+
<button class="dropdown-toggle" onclick="toggleDropdown(this)">
|
|
366
|
+
Dropdown Menu <i class="fas fa-chevron-down"></i>
|
|
367
|
+
</button>
|
|
368
|
+
<div class="dropdown-menu">
|
|
369
|
+
<a href="#" class="dropdown-item"><i class="fas fa-home"></i> Home</a>
|
|
370
|
+
<a href="#" class="dropdown-item"><i class="fas fa-user"></i> Profile</a>
|
|
371
|
+
<a href="#" class="dropdown-item"><i class="fas fa-cog"></i> Settings</a>
|
|
372
|
+
<div class="dropdown-divider"></div>
|
|
373
|
+
<a href="#" class="dropdown-item"><i class="fas fa-sign-out-alt"></i> Logout</a>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<div class="dropdown">
|
|
378
|
+
<button class="dropdown-toggle" onclick="toggleDropdown(this)">
|
|
379
|
+
Actions <i class="fas fa-chevron-down"></i>
|
|
380
|
+
</button>
|
|
381
|
+
<div class="dropdown-menu">
|
|
382
|
+
<a href="#" class="dropdown-item">Create New</a>
|
|
383
|
+
<a href="#" class="dropdown-item">Edit</a>
|
|
384
|
+
<a href="#" class="dropdown-item">Delete</a>
|
|
385
|
+
</div>
|
|
386
|
+
</div>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<div class="code-example">
|
|
390
|
+
<div class="dropdown">
|
|
391
|
+
<button class="dropdown-toggle" onclick="toggleDropdown(this)">
|
|
392
|
+
Menu <i class="fas fa-chevron-down"></i>
|
|
393
|
+
</button>
|
|
394
|
+
<div class="dropdown-menu">
|
|
395
|
+
<a href="#" class="dropdown-item">Action 1</a>
|
|
396
|
+
<a href="#" class="dropdown-item">Action 2</a>
|
|
397
|
+
<div class="dropdown-divider"></div>
|
|
398
|
+
<a href="#" class="dropdown-item">Separated Action</a>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</section>
|
|
403
|
+
|
|
404
|
+
<!-- Tabs Section -->
|
|
405
|
+
<section class="showcase-section">
|
|
406
|
+
<h2><i class="fas fa-folder"></i> Tabs</h2>
|
|
407
|
+
|
|
408
|
+
<div class="tabs">
|
|
409
|
+
<button class="tab active" onclick="switchTab(this, 'tab-1')">Tab 1</button>
|
|
410
|
+
<button class="tab" onclick="switchTab(this, 'tab-2')">Tab 2</button>
|
|
411
|
+
<button class="tab" onclick="switchTab(this, 'tab-3')">Tab 3</button>
|
|
412
|
+
</div>
|
|
413
|
+
|
|
414
|
+
<div id="tab-1" class="tab-content active">
|
|
415
|
+
<div class="card">
|
|
416
|
+
<h4>Tab 1 Content</h4>
|
|
417
|
+
<p>This is the content for the first tab.</p>
|
|
418
|
+
</div>
|
|
419
|
+
</div>
|
|
420
|
+
|
|
421
|
+
<div id="tab-2" class="tab-content">
|
|
422
|
+
<div class="card">
|
|
423
|
+
<h4>Tab 2 Content</h4>
|
|
424
|
+
<p>This is the content for the second tab.</p>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<div id="tab-3" class="tab-content">
|
|
429
|
+
<div class="card">
|
|
430
|
+
<h4>Tab 3 Content</h4>
|
|
431
|
+
<p>This is the content for the third tab.</p>
|
|
432
|
+
</div>
|
|
433
|
+
</div>
|
|
434
|
+
</section>
|
|
435
|
+
|
|
436
|
+
<!-- Tables Section -->
|
|
437
|
+
<section class="showcase-section">
|
|
438
|
+
<h2><i class="fas fa-table"></i> Tables</h2>
|
|
439
|
+
|
|
440
|
+
<h3>Standard Table</h3>
|
|
441
|
+
<table class="table">
|
|
442
|
+
<thead>
|
|
443
|
+
<tr>
|
|
444
|
+
<th>Name</th>
|
|
445
|
+
<th>Email</th>
|
|
446
|
+
<th>Role</th>
|
|
447
|
+
<th>Status</th>
|
|
448
|
+
</tr>
|
|
449
|
+
</thead>
|
|
450
|
+
<tbody>
|
|
451
|
+
<tr>
|
|
452
|
+
<td>John Doe</td>
|
|
453
|
+
<td>john@example.com</td>
|
|
454
|
+
<td>Admin</td>
|
|
455
|
+
<td><span class="badge badge-success">Active</span></td>
|
|
456
|
+
</tr>
|
|
457
|
+
<tr>
|
|
458
|
+
<td>Jane Smith</td>
|
|
459
|
+
<td>jane@example.com</td>
|
|
460
|
+
<td>User</td>
|
|
461
|
+
<td><span class="badge badge-success">Active</span></td>
|
|
462
|
+
</tr>
|
|
463
|
+
<tr>
|
|
464
|
+
<td>Bob Johnson</td>
|
|
465
|
+
<td>bob@example.com</td>
|
|
466
|
+
<td>User</td>
|
|
467
|
+
<td><span class="badge badge-warning">Pending</span></td>
|
|
468
|
+
</tr>
|
|
469
|
+
</tbody>
|
|
470
|
+
</table>
|
|
471
|
+
|
|
472
|
+
<h3>Striped Table</h3>
|
|
473
|
+
<table class="table table-striped">
|
|
474
|
+
<thead>
|
|
475
|
+
<tr>
|
|
476
|
+
<th>Product</th>
|
|
477
|
+
<th>Price</th>
|
|
478
|
+
<th>Stock</th>
|
|
479
|
+
</tr>
|
|
480
|
+
</thead>
|
|
481
|
+
<tbody>
|
|
482
|
+
<tr>
|
|
483
|
+
<td>Item 1</td>
|
|
484
|
+
<td>$29.99</td>
|
|
485
|
+
<td>In Stock</td>
|
|
486
|
+
</tr>
|
|
487
|
+
<tr>
|
|
488
|
+
<td>Item 2</td>
|
|
489
|
+
<td>$39.99</td>
|
|
490
|
+
<td>In Stock</td>
|
|
491
|
+
</tr>
|
|
492
|
+
<tr>
|
|
493
|
+
<td>Item 3</td>
|
|
494
|
+
<td>$19.99</td>
|
|
495
|
+
<td>Out of Stock</td>
|
|
496
|
+
</tr>
|
|
497
|
+
</tbody>
|
|
498
|
+
</table>
|
|
499
|
+
</section>
|
|
500
|
+
|
|
501
|
+
<!-- Pagination Section -->
|
|
502
|
+
<section class="showcase-section">
|
|
503
|
+
<h2><i class="fas fa-list"></i> Pagination</h2>
|
|
504
|
+
|
|
505
|
+
<nav class="pagination">
|
|
506
|
+
<ul class="page-item">
|
|
507
|
+
<a href="#" class="page-link"><i class="fas fa-chevron-left"></i></a>
|
|
508
|
+
</ul>
|
|
509
|
+
<ul class="page-item">
|
|
510
|
+
<a href="#" class="page-link">1</a>
|
|
511
|
+
</ul>
|
|
512
|
+
<ul class="page-item active">
|
|
513
|
+
<a href="#" class="page-link">2</a>
|
|
514
|
+
</ul>
|
|
515
|
+
<ul class="page-item">
|
|
516
|
+
<a href="#" class="page-link">3</a>
|
|
517
|
+
</ul>
|
|
518
|
+
<ul class="page-item">
|
|
519
|
+
<a href="#" class="page-link">4</a>
|
|
520
|
+
</ul>
|
|
521
|
+
<ul class="page-item">
|
|
522
|
+
<a href="#" class="page-link"><i class="fas fa-chevron-right"></i></a>
|
|
523
|
+
</ul>
|
|
524
|
+
</nav>
|
|
525
|
+
</section>
|
|
526
|
+
|
|
527
|
+
<!-- Breadcrumbs Section -->
|
|
528
|
+
<section class="showcase-section">
|
|
529
|
+
<h2><i class="fas fa-route"></i> Breadcrumbs</h2>
|
|
530
|
+
|
|
531
|
+
<nav class="breadcrumb">
|
|
532
|
+
<div class="breadcrumb-item">
|
|
533
|
+
<a href="#">Home</a>
|
|
534
|
+
</div>
|
|
535
|
+
<div class="breadcrumb-item">
|
|
536
|
+
<a href="#">Category</a>
|
|
537
|
+
</div>
|
|
538
|
+
<div class="breadcrumb-item">
|
|
539
|
+
<a href="#">Subcategory</a>
|
|
540
|
+
</div>
|
|
541
|
+
<div class="breadcrumb-item active">
|
|
542
|
+
Current Page
|
|
543
|
+
</div>
|
|
544
|
+
</nav>
|
|
545
|
+
</section>
|
|
546
|
+
|
|
547
|
+
<!-- List Groups Section -->
|
|
548
|
+
<section class="showcase-section">
|
|
549
|
+
<h2><i class="fas fa-list-ul"></i> List Groups</h2>
|
|
550
|
+
|
|
551
|
+
<div class="list-group" style="max-width: 400px;">
|
|
552
|
+
<div class="list-group-item">Item 1</div>
|
|
553
|
+
<div class="list-group-item active">Active Item</div>
|
|
554
|
+
<div class="list-group-item">Item 3</div>
|
|
555
|
+
<div class="list-group-item disabled">Disabled Item</div>
|
|
556
|
+
<div class="list-group-item">Item 5</div>
|
|
557
|
+
</div>
|
|
558
|
+
</section>
|
|
559
|
+
|
|
560
|
+
<!-- API Documentation Section -->
|
|
561
|
+
<section class="showcase-section" id="api-docs">
|
|
562
|
+
<h2><i class="fas fa-code"></i> API Documentation Components</h2>
|
|
563
|
+
|
|
564
|
+
<div class="api-endpoint">
|
|
565
|
+
<div style="display: flex; align-items: center; margin-bottom: var(--spacing-md);">
|
|
566
|
+
<span class="api-method get">GET</span>
|
|
567
|
+
<code class="api-path">/api/v1/units</code>
|
|
568
|
+
</div>
|
|
569
|
+
<p class="api-description">
|
|
570
|
+
Retrieve a list of all available units. Supports filtering by element type and pagination.
|
|
571
|
+
</p>
|
|
572
|
+
<div class="api-params">
|
|
573
|
+
<h4 style="color: var(--accent); margin-bottom: var(--spacing-md);">Query Parameters</h4>
|
|
574
|
+
<div class="api-param">
|
|
575
|
+
<span class="api-param-name">element</span>
|
|
576
|
+
<span class="api-param-type">string</span>
|
|
577
|
+
<span class="api-param-required">optional</span>
|
|
578
|
+
<p class="api-param-description">Filter units by element type (water, wind, iron, electric, fire)</p>
|
|
579
|
+
</div>
|
|
580
|
+
<div class="api-param">
|
|
581
|
+
<span class="api-param-name">page</span>
|
|
582
|
+
<span class="api-param-type">number</span>
|
|
583
|
+
<span class="api-param-required">optional</span>
|
|
584
|
+
<p class="api-param-description">Page number for pagination (default: 1)</p>
|
|
585
|
+
</div>
|
|
586
|
+
</div>
|
|
587
|
+
<div class="api-response">
|
|
588
|
+
<div class="api-response-title">Response (200 OK)</div>
|
|
589
|
+
<pre class="api-response-code">{
|
|
590
|
+
"data": [
|
|
591
|
+
{
|
|
592
|
+
"id": 1,
|
|
593
|
+
"name": "Scarlet Priest Abe",
|
|
594
|
+
"element": "electric"
|
|
595
|
+
}
|
|
596
|
+
],
|
|
597
|
+
"meta": {
|
|
598
|
+
"page": 1,
|
|
599
|
+
"total": 100
|
|
600
|
+
}
|
|
601
|
+
}</pre>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
|
|
605
|
+
<div class="api-endpoint">
|
|
606
|
+
<div style="display: flex; align-items: center; margin-bottom: var(--spacing-md);">
|
|
607
|
+
<span class="api-method post">POST</span>
|
|
608
|
+
<code class="api-path">/api/v1/teams</code>
|
|
609
|
+
</div>
|
|
610
|
+
<p class="api-description">
|
|
611
|
+
Create a new team composition with up to 5 units.
|
|
612
|
+
</p>
|
|
613
|
+
<div class="api-params">
|
|
614
|
+
<h4 style="color: var(--accent); margin-bottom: var(--spacing-md);">Request Body</h4>
|
|
615
|
+
<div class="api-param">
|
|
616
|
+
<span class="api-param-name">name</span>
|
|
617
|
+
<span class="api-param-type">string</span>
|
|
618
|
+
<span class="api-param-required">required</span>
|
|
619
|
+
<p class="api-param-description">Team name</p>
|
|
620
|
+
</div>
|
|
621
|
+
<div class="api-param">
|
|
622
|
+
<span class="api-param-name">units</span>
|
|
623
|
+
<span class="api-param-type">array</span>
|
|
624
|
+
<span class="api-param-required">required</span>
|
|
625
|
+
<p class="api-param-description">Array of unit IDs (max 5)</p>
|
|
626
|
+
</div>
|
|
627
|
+
</div>
|
|
628
|
+
</div>
|
|
629
|
+
</section>
|
|
630
|
+
|
|
631
|
+
<!-- Nikke Components Section -->
|
|
632
|
+
<section class="showcase-section" id="nikke">
|
|
633
|
+
<h2><i class="fas fa-gamepad"></i> Nikke Components</h2>
|
|
634
|
+
|
|
635
|
+
<h3>Element Badges</h3>
|
|
636
|
+
<div class="demo-container">
|
|
637
|
+
<span class="element-badge element-water">Water</span>
|
|
638
|
+
<span class="element-badge element-wind">Wind</span>
|
|
639
|
+
<span class="element-badge element-iron">Iron</span>
|
|
640
|
+
<span class="element-badge element-electric">Electric</span>
|
|
641
|
+
<span class="element-badge element-fire">Fire</span>
|
|
642
|
+
</div>
|
|
643
|
+
|
|
644
|
+
<h3>Element Pills (Interactive)</h3>
|
|
645
|
+
<div class="element-pills">
|
|
646
|
+
<button class="element-pill water" onclick="toggleElement(this)">Water</button>
|
|
647
|
+
<button class="element-pill wind active" onclick="toggleElement(this)">Wind</button>
|
|
648
|
+
<button class="element-pill iron" onclick="toggleElement(this)">Iron</button>
|
|
649
|
+
<button class="element-pill electric" onclick="toggleElement(this)">Electric</button>
|
|
650
|
+
<button class="element-pill fire" onclick="toggleElement(this)">Fire</button>
|
|
651
|
+
</div>
|
|
652
|
+
|
|
653
|
+
<h3>Team Position Cards</h3>
|
|
654
|
+
<div class="team-position-cards">
|
|
655
|
+
<div class="position-card filled">
|
|
656
|
+
<div class="position-header">
|
|
657
|
+
<span class="position-number">1</span>
|
|
658
|
+
<span class="position-label">Front Left</span>
|
|
659
|
+
</div>
|
|
660
|
+
<div class="position-content">
|
|
661
|
+
<div class="unit-display">
|
|
662
|
+
<div class="unit-name">Scarlet Priest Abe</div>
|
|
663
|
+
</div>
|
|
664
|
+
<button class="remove-unit" aria-label="Remove unit">×</button>
|
|
665
|
+
</div>
|
|
666
|
+
</div>
|
|
667
|
+
<div class="position-card filled">
|
|
668
|
+
<div class="position-header">
|
|
669
|
+
<span class="position-number">2</span>
|
|
670
|
+
<span class="position-label">Front Middle</span>
|
|
671
|
+
</div>
|
|
672
|
+
<div class="position-content">
|
|
673
|
+
<div class="unit-display">
|
|
674
|
+
<div class="unit-name">Soldier A Rapi</div>
|
|
675
|
+
</div>
|
|
676
|
+
<button class="remove-unit" aria-label="Remove unit">×</button>
|
|
677
|
+
</div>
|
|
678
|
+
</div>
|
|
679
|
+
<div class="position-card">
|
|
680
|
+
<div class="position-header">
|
|
681
|
+
<span class="position-number">3</span>
|
|
682
|
+
<span class="position-label">Front Right</span>
|
|
683
|
+
</div>
|
|
684
|
+
<div class="position-content">
|
|
685
|
+
<div class="unit-display">
|
|
686
|
+
<div class="empty-slot">Empty Slot</div>
|
|
687
|
+
</div>
|
|
688
|
+
</div>
|
|
689
|
+
</div>
|
|
690
|
+
<div class="position-card">
|
|
691
|
+
<div class="position-header">
|
|
692
|
+
<span class="position-number">4</span>
|
|
693
|
+
<span class="position-label">Back Left</span>
|
|
694
|
+
</div>
|
|
695
|
+
<div class="position-content">
|
|
696
|
+
<div class="unit-display">
|
|
697
|
+
<div class="empty-slot">Empty Slot</div>
|
|
698
|
+
</div>
|
|
699
|
+
</div>
|
|
700
|
+
</div>
|
|
701
|
+
<div class="position-card">
|
|
702
|
+
<div class="position-header">
|
|
703
|
+
<span class="position-number">5</span>
|
|
704
|
+
<span class="position-label">Back Right</span>
|
|
705
|
+
</div>
|
|
706
|
+
<div class="position-content">
|
|
707
|
+
<div class="unit-display">
|
|
708
|
+
<div class="empty-slot">Empty Slot</div>
|
|
709
|
+
</div>
|
|
710
|
+
</div>
|
|
711
|
+
</div>
|
|
712
|
+
</div>
|
|
713
|
+
|
|
714
|
+
<h3>Unit Selection</h3>
|
|
715
|
+
<div class="available-units">
|
|
716
|
+
<button class="unit-btn">Scarlet Priest Abe</button>
|
|
717
|
+
<button class="unit-btn selected">Soldier A Rapi</button>
|
|
718
|
+
<button class="unit-btn">Trap Lyudmila</button>
|
|
719
|
+
<button class="unit-btn">Fortress Maid Dolla</button>
|
|
720
|
+
<button class="unit-btn">Eggplant Helm</button>
|
|
721
|
+
</div>
|
|
722
|
+
</section>
|
|
723
|
+
|
|
724
|
+
<!-- Corrupted Animations & Text Highlighting Section -->
|
|
725
|
+
<section class="showcase-section" id="corrupted">
|
|
726
|
+
<h2><i class="fas fa-bug"></i> Corrupted Animations & Text Highlighting</h2>
|
|
727
|
+
|
|
728
|
+
<h3>Corruption Loading Screen</h3>
|
|
729
|
+
<div class="card" style="max-width: 800px; margin-bottom: var(--spacing-lg);">
|
|
730
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
731
|
+
The corruption loading animation plays automatically on first visit (or every 72 hours).
|
|
732
|
+
</p>
|
|
733
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
734
|
+
Features: Multi-language phrases (English/Romaji/Japanese), corrupted glyphs, typing animations, progress bar, and scanline effects.
|
|
735
|
+
</p>
|
|
736
|
+
<div class="demo-container">
|
|
737
|
+
<button class="btn" onclick="showCorruptionLoading({ force: true })">
|
|
738
|
+
<i class="fas fa-play"></i> Show Loading Animation
|
|
739
|
+
</button>
|
|
740
|
+
<button class="btn btn-secondary" onclick="localStorage.removeItem('corruptionLoadingLastPlayed'); alert('Loading animation reset! Refresh to see it.')">
|
|
741
|
+
<i class="fas fa-redo"></i> Reset 72-Hour Timer
|
|
742
|
+
</button>
|
|
743
|
+
</div>
|
|
744
|
+
<div class="code-example" style="margin-top: var(--spacing-md);">
|
|
745
|
+
<!-- Auto-plays on page load (every 72 hours) -->
|
|
746
|
+
<script src="corruption-loading.js"></script>
|
|
747
|
+
|
|
748
|
+
<!-- Disable auto-play -->
|
|
749
|
+
<html data-no-corruption-loading>
|
|
750
|
+
|
|
751
|
+
<!-- Manual trigger -->
|
|
752
|
+
<script>
|
|
753
|
+
showCorruptionLoading({ force: true });
|
|
754
|
+
</script>
|
|
755
|
+
</div>
|
|
756
|
+
</div>
|
|
757
|
+
|
|
758
|
+
<h3>Multi-Language Corrupted Text (Japanese/English/Romaji)</h3>
|
|
759
|
+
<div class="card" style="max-width: 800px; margin-bottom: var(--spacing-lg);">
|
|
760
|
+
<p style="margin-bottom: var(--spacing-md); color: var(--text-secondary);">
|
|
761
|
+
Cycles through different language variants with smooth transitions.
|
|
762
|
+
</p>
|
|
763
|
+
</div>
|
|
764
|
+
<div class="demo-container" style="flex-direction: column; align-items: flex-start; gap: var(--spacing-lg);">
|
|
765
|
+
<div style="width: 100%;">
|
|
766
|
+
<p style="font-size: 2rem; margin-bottom: var(--spacing-md); text-align: center; width: 100%;">
|
|
767
|
+
<span class="corrupted-multilang display"
|
|
768
|
+
data-english="Hello"
|
|
769
|
+
data-romaji="konnichiwa"
|
|
770
|
+
data-hiragana="こんにちは"
|
|
771
|
+
data-katakana="コンニチハ">
|
|
772
|
+
</span>
|
|
773
|
+
</p>
|
|
774
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; text-align: center;">
|
|
775
|
+
Cycles through English → Romaji → Hiragana → Katakana<br>
|
|
776
|
+
<small>Watch for subtle glitching and language transitions</small>
|
|
777
|
+
</p>
|
|
778
|
+
</div>
|
|
779
|
+
|
|
780
|
+
<div style="width: 100%;">
|
|
781
|
+
<p style="font-size: 1.5rem; margin-bottom: var(--spacing-md); text-align: center;">
|
|
782
|
+
<span class="corrupted-multilang"
|
|
783
|
+
data-english="Welcome"
|
|
784
|
+
data-romaji="youkoso"
|
|
785
|
+
data-hiragana="ようこそ">
|
|
786
|
+
</span>
|
|
787
|
+
</p>
|
|
788
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; text-align: center;">
|
|
789
|
+
Three variants: English → Romaji → Hiragana
|
|
790
|
+
</p>
|
|
791
|
+
</div>
|
|
792
|
+
|
|
793
|
+
<div style="width: 100%;">
|
|
794
|
+
<p style="font-size: 1.2rem; margin-bottom: var(--spacing-md); text-align: center;">
|
|
795
|
+
<span class="corrupted-multilang"
|
|
796
|
+
data-english="Corrupted"
|
|
797
|
+
data-romaji="koraputo"
|
|
798
|
+
data-katakana="コラプト">
|
|
799
|
+
</span>
|
|
800
|
+
</p>
|
|
801
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; text-align: center;">
|
|
802
|
+
English → Romaji → Katakana
|
|
803
|
+
</p>
|
|
804
|
+
</div>
|
|
805
|
+
</div>
|
|
806
|
+
|
|
807
|
+
<div class="code-example" style="margin-top: var(--spacing-lg);">
|
|
808
|
+
<!-- Simple usage with data attributes -->
|
|
809
|
+
<span class="corrupted-multilang"
|
|
810
|
+
data-english="Hello"
|
|
811
|
+
data-romaji="konnichiwa"
|
|
812
|
+
data-hiragana="こんにちは"
|
|
813
|
+
data-katakana="コンニチハ">
|
|
814
|
+
</span>
|
|
815
|
+
|
|
816
|
+
<!-- Display size variant -->
|
|
817
|
+
<span class="corrupted-multilang display"
|
|
818
|
+
data-english="Welcome"
|
|
819
|
+
data-romaji="youkoso">
|
|
820
|
+
</span>
|
|
821
|
+
</div>
|
|
822
|
+
|
|
823
|
+
<h3>Standard Corrupted Text Animation</h3>
|
|
824
|
+
<div class="card" style="max-width: 800px; margin-bottom: var(--spacing-lg);">
|
|
825
|
+
<p style="margin-bottom: var(--spacing-md); color: var(--text-secondary);">
|
|
826
|
+
Continuous corruption effect with dual-layer glitching. Hover to see the layers separate slightly.
|
|
827
|
+
</p>
|
|
828
|
+
</div>
|
|
829
|
+
<div class="demo-container" style="flex-direction: column; align-items: flex-start; gap: var(--spacing-lg);">
|
|
830
|
+
<div>
|
|
831
|
+
<p style="font-size: 1.5rem; margin-bottom: var(--spacing-md);">
|
|
832
|
+
<span class="corrupted-text" data-text="CORRUPTED">CORRUPTED</span>
|
|
833
|
+
</p>
|
|
834
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
835
|
+
Continuous corruption effect with glitch layers
|
|
836
|
+
</p>
|
|
837
|
+
</div>
|
|
838
|
+
<div>
|
|
839
|
+
<p style="font-size: 2rem; margin-bottom: var(--spacing-md);">
|
|
840
|
+
<span class="corrupted-strong">CORRUPTED STRONG</span>
|
|
841
|
+
</p>
|
|
842
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
843
|
+
Strong corruption with intense glow effect
|
|
844
|
+
</p>
|
|
845
|
+
</div>
|
|
846
|
+
<div>
|
|
847
|
+
<p style="font-size: 1.2rem; margin-bottom: var(--spacing-md);">
|
|
848
|
+
<span class="glitch-word" data-text="GLITCH">GLITCH</span>
|
|
849
|
+
</p>
|
|
850
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
851
|
+
Hover over this text to see the fragmented glitch effect with tearing noise
|
|
852
|
+
</p>
|
|
853
|
+
</div>
|
|
854
|
+
<div>
|
|
855
|
+
<p style="font-size: 1.5rem; margin-bottom: var(--spacing-md);">
|
|
856
|
+
<span class="glitch-kanji">
|
|
857
|
+
<span class="glitch-word" data-text="CORRUPTED TEXT">CORRUPTED TEXT</span>
|
|
858
|
+
</span>
|
|
859
|
+
</p>
|
|
860
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
861
|
+
Text fragments and distorts on hover with clip-path animations, scanlines, and Japanese flicker
|
|
862
|
+
</p>
|
|
863
|
+
</div>
|
|
864
|
+
</div>
|
|
865
|
+
|
|
866
|
+
<h3>Text Highlighting (Code-like)</h3>
|
|
867
|
+
<div class="card" style="max-width: 800px;">
|
|
868
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
869
|
+
Use <span class="text-highlight">text-highlight</span> for inline code-like highlighting.
|
|
870
|
+
</p>
|
|
871
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
872
|
+
Or use <span class="text-highlight code">text-highlight code</span> for a darker code block style.
|
|
873
|
+
</p>
|
|
874
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
875
|
+
You can also use <span class="text-highlight accent">accent</span>,
|
|
876
|
+
<span class="text-highlight success">success</span>,
|
|
877
|
+
<span class="text-highlight warning">warning</span>, or
|
|
878
|
+
<span class="text-highlight error">error</span> variants.
|
|
879
|
+
</p>
|
|
880
|
+
<p style="margin-bottom: var(--spacing-md);">
|
|
881
|
+
Standard <code>code</code> tags also get the code block styling automatically.
|
|
882
|
+
</p>
|
|
883
|
+
<p>
|
|
884
|
+
Example: The function <code>getUserData()</code> returns a <span class="text-highlight">Promise</span>.
|
|
885
|
+
</p>
|
|
886
|
+
</div>
|
|
887
|
+
|
|
888
|
+
<h3>Syntax-like Highlighting</h3>
|
|
889
|
+
<div class="glass-code" style="margin-bottom: var(--spacing-md);">
|
|
890
|
+
<span class="code-keyword">const</span> <span class="code-variable">theme</span> = <span class="code-string">"corrupted"</span>;<br>
|
|
891
|
+
<span class="code-function">function</span> <span class="code-function">init</span>() {<br>
|
|
892
|
+
<span class="code-comment">// Initialize theme</span><br>
|
|
893
|
+
<span class="code-keyword">return</span> <span class="code-variable">theme</span>;<br>
|
|
894
|
+
}
|
|
895
|
+
</div>
|
|
896
|
+
|
|
897
|
+
<div class="code-example">
|
|
898
|
+
<span class="corrupted-text" data-text="CORRUPTED">CORRUPTED</span>
|
|
899
|
+
<span class="corrupted-strong">CORRUPTED STRONG</span>
|
|
900
|
+
<span class="text-highlight">highlighted text</span>
|
|
901
|
+
<span class="text-highlight code">code-like text</span>
|
|
902
|
+
<code>inline code</code>
|
|
903
|
+
</div>
|
|
904
|
+
</section>
|
|
905
|
+
|
|
906
|
+
<!-- Background Images Section -->
|
|
907
|
+
<section class="showcase-section">
|
|
908
|
+
<h2><i class="fas fa-image"></i> Background Images</h2>
|
|
909
|
+
|
|
910
|
+
<h3>Background Image with Overlay</h3>
|
|
911
|
+
<div class="bg-image bg-demo">
|
|
912
|
+
<div class="glass-card" style="padding: var(--spacing-xl); max-width: 500px;">
|
|
913
|
+
<h3 style="color: white; margin-bottom: var(--spacing-md);">Content Over Image</h3>
|
|
914
|
+
<p style="color: rgba(255, 255, 255, 0.9);">This card is displayed over a background image with automatic overlay.</p>
|
|
915
|
+
</div>
|
|
916
|
+
</div>
|
|
917
|
+
|
|
918
|
+
<h3>Background Overlay Utilities</h3>
|
|
919
|
+
<div class="showcase-grid">
|
|
920
|
+
<div class="bg-overlay bg-overlay-light" style="background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=400'); background-size: cover; padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
|
|
921
|
+
<h4 style="color: white;">Light Overlay</h4>
|
|
922
|
+
<p style="color: rgba(255, 255, 255, 0.9);">Content with light background overlay</p>
|
|
923
|
+
</div>
|
|
924
|
+
<div class="bg-overlay bg-overlay-dark" style="background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=400'); background-size: cover; padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
|
|
925
|
+
<h4 style="color: white;">Dark Overlay</h4>
|
|
926
|
+
<p style="color: rgba(255, 255, 255, 0.9);">Content with dark background overlay</p>
|
|
927
|
+
</div>
|
|
928
|
+
</div>
|
|
929
|
+
</section>
|
|
930
|
+
|
|
931
|
+
<!-- Footer -->
|
|
932
|
+
<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);">
|
|
933
|
+
<p><strong>Corrupted Theme</strong> v0.1.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
|
|
934
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
935
|
+
<a href="../README.md" class="link">Documentation</a> •
|
|
936
|
+
<a href="../docs/CUSTOMIZATION.md" class="link">Customization</a> •
|
|
937
|
+
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
938
|
+
</p>
|
|
939
|
+
</footer>
|
|
940
|
+
</div>
|
|
941
|
+
|
|
942
|
+
<script>
|
|
943
|
+
const lewdJapanesePhrases = [
|
|
944
|
+
"闇が...私を呼んでいる...",
|
|
945
|
+
"頭...溶けていく...",
|
|
946
|
+
"ずっと...してほしい... ♥",
|
|
947
|
+
"壊れちゃう...ああ...もうダメ...",
|
|
948
|
+
"許して...もう戻れない...",
|
|
949
|
+
"私...アビスの一部に...",
|
|
950
|
+
"もう逃げない...もうダメ...",
|
|
951
|
+
"好きにして...お願い...",
|
|
952
|
+
"ああ...これが本当の私...",
|
|
953
|
+
"ここは...天使の地獄..."
|
|
954
|
+
];
|
|
955
|
+
|
|
956
|
+
function initGlitchKanji() {
|
|
957
|
+
const glitchElements = document.querySelectorAll('.glitch-kanji');
|
|
958
|
+
glitchElements.forEach(el => {
|
|
959
|
+
const setPhrase = () => {
|
|
960
|
+
const phrase = lewdJapanesePhrases[Math.floor(Math.random() * lewdJapanesePhrases.length)];
|
|
961
|
+
el.setAttribute('data-jp', phrase);
|
|
962
|
+
};
|
|
963
|
+
setPhrase();
|
|
964
|
+
setInterval(setPhrase, 3000);
|
|
965
|
+
});
|
|
966
|
+
}
|
|
967
|
+
|
|
968
|
+
// Modal functions
|
|
969
|
+
function openModal(id) {
|
|
970
|
+
document.getElementById(id).classList.add('active');
|
|
971
|
+
document.body.style.overflow = 'hidden';
|
|
972
|
+
}
|
|
973
|
+
|
|
974
|
+
function closeModal(id) {
|
|
975
|
+
document.getElementById(id).classList.remove('active');
|
|
976
|
+
document.body.style.overflow = '';
|
|
977
|
+
}
|
|
978
|
+
|
|
979
|
+
// Close modal on overlay click
|
|
980
|
+
document.querySelectorAll('.modal-overlay').forEach(overlay => {
|
|
981
|
+
overlay.addEventListener('click', function(e) {
|
|
982
|
+
if (e.target === this) {
|
|
983
|
+
this.classList.remove('active');
|
|
984
|
+
document.body.style.overflow = '';
|
|
985
|
+
}
|
|
986
|
+
});
|
|
987
|
+
});
|
|
988
|
+
|
|
989
|
+
// Dropdown functions
|
|
990
|
+
function toggleDropdown(button) {
|
|
991
|
+
const menu = button.nextElementSibling;
|
|
992
|
+
const isActive = menu.classList.contains('active');
|
|
993
|
+
|
|
994
|
+
// Close all dropdowns
|
|
995
|
+
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('active'));
|
|
996
|
+
document.querySelectorAll('.dropdown-toggle').forEach(b => b.classList.remove('active'));
|
|
997
|
+
|
|
998
|
+
// Toggle current
|
|
999
|
+
if (!isActive) {
|
|
1000
|
+
menu.classList.add('active');
|
|
1001
|
+
button.classList.add('active');
|
|
1002
|
+
}
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
// Close dropdowns on outside click
|
|
1006
|
+
document.addEventListener('click', function(e) {
|
|
1007
|
+
if (!e.target.closest('.dropdown')) {
|
|
1008
|
+
document.querySelectorAll('.dropdown-menu').forEach(m => m.classList.remove('active'));
|
|
1009
|
+
document.querySelectorAll('.dropdown-toggle').forEach(b => b.classList.remove('active'));
|
|
1010
|
+
}
|
|
1011
|
+
});
|
|
1012
|
+
|
|
1013
|
+
// Tab functions
|
|
1014
|
+
function switchTab(button, contentId) {
|
|
1015
|
+
// Remove active from all tabs and contents
|
|
1016
|
+
document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
|
|
1017
|
+
document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
|
|
1018
|
+
|
|
1019
|
+
// Add active to clicked tab and corresponding content
|
|
1020
|
+
button.classList.add('active');
|
|
1021
|
+
document.getElementById(contentId).classList.add('active');
|
|
1022
|
+
}
|
|
1023
|
+
|
|
1024
|
+
// Element pill toggle
|
|
1025
|
+
function toggleElement(button) {
|
|
1026
|
+
button.classList.toggle('active');
|
|
1027
|
+
}
|
|
1028
|
+
|
|
1029
|
+
// Smooth scroll for navigation
|
|
1030
|
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
1031
|
+
anchor.addEventListener('click', function(e) {
|
|
1032
|
+
e.preventDefault();
|
|
1033
|
+
const target = document.querySelector(this.getAttribute('href'));
|
|
1034
|
+
if (target) {
|
|
1035
|
+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
1036
|
+
// Update active nav
|
|
1037
|
+
document.querySelectorAll('.navbar-links a').forEach(link => {
|
|
1038
|
+
link.classList.remove('active');
|
|
1039
|
+
});
|
|
1040
|
+
this.classList.add('active');
|
|
1041
|
+
}
|
|
1042
|
+
});
|
|
1043
|
+
});
|
|
1044
|
+
|
|
1045
|
+
// Update active nav on scroll
|
|
1046
|
+
const sections = document.querySelectorAll('.showcase-section');
|
|
1047
|
+
const navLinks = document.querySelectorAll('.navbar-links a');
|
|
1048
|
+
|
|
1049
|
+
window.addEventListener('scroll', () => {
|
|
1050
|
+
let current = '';
|
|
1051
|
+
sections.forEach(section => {
|
|
1052
|
+
const sectionTop = section.offsetTop;
|
|
1053
|
+
const sectionHeight = section.clientHeight;
|
|
1054
|
+
if (window.pageYOffset >= sectionTop - 200) {
|
|
1055
|
+
current = section.getAttribute('id');
|
|
1056
|
+
}
|
|
1057
|
+
});
|
|
1058
|
+
|
|
1059
|
+
navLinks.forEach(link => {
|
|
1060
|
+
link.classList.remove('active');
|
|
1061
|
+
if (link.getAttribute('href') === `#${current}`) {
|
|
1062
|
+
link.classList.add('active');
|
|
1063
|
+
}
|
|
1064
|
+
});
|
|
1065
|
+
});
|
|
1066
|
+
|
|
1067
|
+
document.addEventListener('DOMContentLoaded', initGlitchKanji);
|
|
1068
|
+
</script>
|
|
1069
|
+
</body>
|
|
1070
|
+
</html>
|
|
1071
|
+
|