@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,580 @@
|
|
|
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>Nikke Team Builder - 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
|
+
<link rel="stylesheet" href="../src/css/nikke-utilities.css">
|
|
10
|
+
<style>
|
|
11
|
+
.container {
|
|
12
|
+
max-width: 1200px;
|
|
13
|
+
margin: 0 auto;
|
|
14
|
+
padding: var(--spacing-lg);
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.section {
|
|
18
|
+
margin-bottom: var(--spacing-2xl);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.section h2 {
|
|
22
|
+
color: var(--accent);
|
|
23
|
+
margin-bottom: var(--spacing-lg);
|
|
24
|
+
font-size: 1.5rem;
|
|
25
|
+
padding-bottom: var(--spacing-md);
|
|
26
|
+
border-bottom: 2px solid var(--border);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.boss-info {
|
|
30
|
+
background: var(--glass);
|
|
31
|
+
border: 1px solid var(--border);
|
|
32
|
+
border-radius: var(--radius-lg);
|
|
33
|
+
padding: var(--spacing-lg);
|
|
34
|
+
margin-bottom: var(--spacing-lg);
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.boss-name {
|
|
38
|
+
font-size: 1.5rem;
|
|
39
|
+
color: var(--text);
|
|
40
|
+
margin-bottom: var(--spacing-md);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.boss-stat {
|
|
44
|
+
display: flex;
|
|
45
|
+
justify-content: space-between;
|
|
46
|
+
padding: var(--spacing-sm) 0;
|
|
47
|
+
border-bottom: 1px solid var(--border-light);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.boss-stat:last-child {
|
|
51
|
+
border-bottom: none;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.boss-stat-label {
|
|
55
|
+
color: var(--text-secondary);
|
|
56
|
+
font-weight: 600;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.boss-stat-value {
|
|
60
|
+
color: var(--text);
|
|
61
|
+
font-weight: 700;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.element-showcase {
|
|
65
|
+
display: grid;
|
|
66
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
67
|
+
gap: var(--spacing-lg);
|
|
68
|
+
margin-bottom: var(--spacing-lg);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.element-demo {
|
|
72
|
+
background: var(--glass);
|
|
73
|
+
border: 1px solid var(--border);
|
|
74
|
+
border-radius: var(--radius-lg);
|
|
75
|
+
padding: var(--spacing-lg);
|
|
76
|
+
text-align: center;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.element-demo h4 {
|
|
80
|
+
color: var(--text);
|
|
81
|
+
margin-bottom: var(--spacing-md);
|
|
82
|
+
font-size: 1.1rem;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.badge-variants {
|
|
86
|
+
display: flex;
|
|
87
|
+
flex-direction: column;
|
|
88
|
+
gap: var(--spacing-md);
|
|
89
|
+
margin-bottom: var(--spacing-md);
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.variant-row {
|
|
93
|
+
display: flex;
|
|
94
|
+
gap: var(--spacing-md);
|
|
95
|
+
flex-wrap: wrap;
|
|
96
|
+
align-items: center;
|
|
97
|
+
justify-content: center;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.unit-grid {
|
|
101
|
+
display: grid;
|
|
102
|
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
103
|
+
gap: var(--spacing-md);
|
|
104
|
+
margin-bottom: var(--spacing-lg);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.unit-card {
|
|
108
|
+
background: var(--glass);
|
|
109
|
+
border: 1px solid var(--border);
|
|
110
|
+
border-radius: var(--radius-lg);
|
|
111
|
+
padding: var(--spacing-md);
|
|
112
|
+
text-align: center;
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.unit-card h5 {
|
|
116
|
+
color: var(--text);
|
|
117
|
+
margin-bottom: var(--spacing-sm);
|
|
118
|
+
font-size: 0.95rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.unit-card .element-badge {
|
|
122
|
+
display: inline-block;
|
|
123
|
+
margin-bottom: var(--spacing-sm);
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
.code-example {
|
|
127
|
+
background: var(--bg);
|
|
128
|
+
border: 1px solid var(--border);
|
|
129
|
+
border-radius: var(--radius-md);
|
|
130
|
+
padding: var(--spacing-md);
|
|
131
|
+
margin-top: var(--spacing-md);
|
|
132
|
+
font-family: 'Courier New', monospace;
|
|
133
|
+
font-size: 0.85rem;
|
|
134
|
+
color: var(--text-secondary);
|
|
135
|
+
overflow-x: auto;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.tabs {
|
|
139
|
+
display: flex;
|
|
140
|
+
gap: var(--spacing-md);
|
|
141
|
+
margin-bottom: var(--spacing-lg);
|
|
142
|
+
border-bottom: 2px solid var(--border);
|
|
143
|
+
padding-bottom: var(--spacing-md);
|
|
144
|
+
flex-wrap: wrap;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.tab-button {
|
|
148
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
149
|
+
background: transparent;
|
|
150
|
+
border: none;
|
|
151
|
+
color: var(--text-secondary);
|
|
152
|
+
cursor: pointer;
|
|
153
|
+
font-weight: 600;
|
|
154
|
+
transition: all var(--transition-normal);
|
|
155
|
+
border-bottom: 2px solid transparent;
|
|
156
|
+
margin-bottom: -2px;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.tab-button:hover {
|
|
160
|
+
color: var(--text);
|
|
161
|
+
}
|
|
162
|
+
|
|
163
|
+
.tab-button.active {
|
|
164
|
+
color: var(--accent);
|
|
165
|
+
border-bottom-color: var(--accent);
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.tab-content {
|
|
169
|
+
display: none;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.tab-content.active {
|
|
173
|
+
display: block;
|
|
174
|
+
}
|
|
175
|
+
</style>
|
|
176
|
+
</head>
|
|
177
|
+
<body>
|
|
178
|
+
<nav class="navbar">
|
|
179
|
+
<div class="navbar-content">
|
|
180
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
|
|
181
|
+
<div class="navbar-links">
|
|
182
|
+
<a href="#elements">Elements</a>
|
|
183
|
+
<a href="#team">Team Builder</a>
|
|
184
|
+
<a href="#units">Units</a>
|
|
185
|
+
<a href="#code">Code</a>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</nav>
|
|
189
|
+
|
|
190
|
+
<div class="container">
|
|
191
|
+
<h1><i class="fas fa-users"></i> Nikke Team Builder</h1>
|
|
192
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
|
|
193
|
+
Build teams with proper element styling and team composition management.
|
|
194
|
+
</p>
|
|
195
|
+
|
|
196
|
+
<!-- Element System Section -->
|
|
197
|
+
<section id="elements" class="section">
|
|
198
|
+
<h2>Nikke Element System</h2>
|
|
199
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
200
|
+
Five core elements with consistent color coding across all game features.
|
|
201
|
+
</p>
|
|
202
|
+
|
|
203
|
+
<!-- Element Pills -->
|
|
204
|
+
<div style="margin-bottom: var(--spacing-2xl);">
|
|
205
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Element Selection Buttons</h3>
|
|
206
|
+
<div class="element-pills">
|
|
207
|
+
<button class="element-pill water">Water</button>
|
|
208
|
+
<button class="element-pill wind">Wind</button>
|
|
209
|
+
<button class="element-pill iron">Iron</button>
|
|
210
|
+
<button class="element-pill electric">Electric</button>
|
|
211
|
+
<button class="element-pill fire">Fire</button>
|
|
212
|
+
</div>
|
|
213
|
+
</div>
|
|
214
|
+
|
|
215
|
+
<!-- Element Badges -->
|
|
216
|
+
<div style="margin-bottom: var(--spacing-2xl);">
|
|
217
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Element Badge Variants</h3>
|
|
218
|
+
|
|
219
|
+
<div class="element-showcase">
|
|
220
|
+
<div class="element-demo">
|
|
221
|
+
<h4>Water</h4>
|
|
222
|
+
<div class="badge-variants">
|
|
223
|
+
<div class="variant-row">
|
|
224
|
+
<span class="element-badge element-water">Outlined</span>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="variant-row">
|
|
227
|
+
<span class="element-badge solid element-water">Solid</span>
|
|
228
|
+
</div>
|
|
229
|
+
<div class="variant-row">
|
|
230
|
+
<span class="element-badge outline element-water">Outline</span>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="element-demo">
|
|
236
|
+
<h4>Wind</h4>
|
|
237
|
+
<div class="badge-variants">
|
|
238
|
+
<div class="variant-row">
|
|
239
|
+
<span class="element-badge element-wind">Outlined</span>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="variant-row">
|
|
242
|
+
<span class="element-badge solid element-wind">Solid</span>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="variant-row">
|
|
245
|
+
<span class="element-badge outline element-wind">Outline</span>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</div>
|
|
249
|
+
|
|
250
|
+
<div class="element-demo">
|
|
251
|
+
<h4>Iron</h4>
|
|
252
|
+
<div class="badge-variants">
|
|
253
|
+
<div class="variant-row">
|
|
254
|
+
<span class="element-badge element-iron">Outlined</span>
|
|
255
|
+
</div>
|
|
256
|
+
<div class="variant-row">
|
|
257
|
+
<span class="element-badge solid element-iron">Solid</span>
|
|
258
|
+
</div>
|
|
259
|
+
<div class="variant-row">
|
|
260
|
+
<span class="element-badge outline element-iron">Outline</span>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<div class="element-demo">
|
|
266
|
+
<h4>Electric</h4>
|
|
267
|
+
<div class="badge-variants">
|
|
268
|
+
<div class="variant-row">
|
|
269
|
+
<span class="element-badge element-electric">Outlined</span>
|
|
270
|
+
</div>
|
|
271
|
+
<div class="variant-row">
|
|
272
|
+
<span class="element-badge solid element-electric">Solid</span>
|
|
273
|
+
</div>
|
|
274
|
+
<div class="variant-row">
|
|
275
|
+
<span class="element-badge outline element-electric">Outline</span>
|
|
276
|
+
</div>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<div class="element-demo">
|
|
281
|
+
<h4>Fire</h4>
|
|
282
|
+
<div class="badge-variants">
|
|
283
|
+
<div class="variant-row">
|
|
284
|
+
<span class="element-badge element-fire">Outlined</span>
|
|
285
|
+
</div>
|
|
286
|
+
<div class="variant-row">
|
|
287
|
+
<span class="element-badge solid element-fire">Solid</span>
|
|
288
|
+
</div>
|
|
289
|
+
<div class="variant-row">
|
|
290
|
+
<span class="element-badge outline element-fire">Outline</span>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</div>
|
|
295
|
+
</div>
|
|
296
|
+
</section>
|
|
297
|
+
|
|
298
|
+
<!-- Boss Information -->
|
|
299
|
+
<section class="section">
|
|
300
|
+
<h2>Boss Information</h2>
|
|
301
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
302
|
+
Example boss showing element weakness display.
|
|
303
|
+
</p>
|
|
304
|
+
|
|
305
|
+
<div class="boss-info">
|
|
306
|
+
<div class="boss-name">
|
|
307
|
+
<i class="fas fa-dragon"></i> Phantom Gloom
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<div class="boss-stat">
|
|
311
|
+
<span class="boss-stat-label">Element Weakness:</span>
|
|
312
|
+
<span class="boss-stat-value">
|
|
313
|
+
<span class="element-badge solid element-fire">Fire</span>
|
|
314
|
+
</span>
|
|
315
|
+
</div>
|
|
316
|
+
|
|
317
|
+
<div class="boss-stat">
|
|
318
|
+
<span class="boss-stat-label">HP:</span>
|
|
319
|
+
<span class="boss-stat-value">450,000</span>
|
|
320
|
+
</div>
|
|
321
|
+
|
|
322
|
+
<div class="boss-stat">
|
|
323
|
+
<span class="boss-stat-label">Attack Power:</span>
|
|
324
|
+
<span class="boss-stat-value">1,250</span>
|
|
325
|
+
</div>
|
|
326
|
+
|
|
327
|
+
<div class="boss-stat">
|
|
328
|
+
<span class="boss-stat-label">Recommended Level:</span>
|
|
329
|
+
<span class="boss-stat-value">42+</span>
|
|
330
|
+
</div>
|
|
331
|
+
</div>
|
|
332
|
+
</section>
|
|
333
|
+
|
|
334
|
+
<!-- Team Builder Section -->
|
|
335
|
+
<section id="team" class="section">
|
|
336
|
+
<h2>Team Composition</h2>
|
|
337
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
338
|
+
Build your 5-unit team with position cards and drag-and-drop support.
|
|
339
|
+
</p>
|
|
340
|
+
|
|
341
|
+
<div class="team-position-cards">
|
|
342
|
+
<div class="position-card filled">
|
|
343
|
+
<div class="position-header">
|
|
344
|
+
<span class="position-number">1</span>
|
|
345
|
+
<span class="position-label">Front Left</span>
|
|
346
|
+
</div>
|
|
347
|
+
<div class="position-content">
|
|
348
|
+
<div class="unit-display">
|
|
349
|
+
<div class="unit-name">Scarlet Priest Abe</div>
|
|
350
|
+
</div>
|
|
351
|
+
<button class="remove-unit" onclick="removeUnit(1)" aria-label="Remove unit">×</button>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<div class="position-card filled">
|
|
356
|
+
<div class="position-header">
|
|
357
|
+
<span class="position-number">2</span>
|
|
358
|
+
<span class="position-label">Front Middle</span>
|
|
359
|
+
</div>
|
|
360
|
+
<div class="position-content">
|
|
361
|
+
<div class="unit-display">
|
|
362
|
+
<div class="unit-name">Soldier A Rapi</div>
|
|
363
|
+
</div>
|
|
364
|
+
<button class="remove-unit" onclick="removeUnit(2)" aria-label="Remove unit">×</button>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
|
|
368
|
+
<div class="position-card filled">
|
|
369
|
+
<div class="position-header">
|
|
370
|
+
<span class="position-number">3</span>
|
|
371
|
+
<span class="position-label">Front Right</span>
|
|
372
|
+
</div>
|
|
373
|
+
<div class="position-content">
|
|
374
|
+
<div class="unit-display">
|
|
375
|
+
<div class="unit-name">Trap Lyudmila</div>
|
|
376
|
+
</div>
|
|
377
|
+
<button class="remove-unit" onclick="removeUnit(3)" aria-label="Remove unit">×</button>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<div class="position-card filled">
|
|
382
|
+
<div class="position-header">
|
|
383
|
+
<span class="position-number">4</span>
|
|
384
|
+
<span class="position-label">Back Left</span>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="position-content">
|
|
387
|
+
<div class="unit-display">
|
|
388
|
+
<div class="unit-name">Fortress Maid Dolla</div>
|
|
389
|
+
</div>
|
|
390
|
+
<button class="remove-unit" onclick="removeUnit(4)" aria-label="Remove unit">×</button>
|
|
391
|
+
</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div class="position-card">
|
|
395
|
+
<div class="position-header">
|
|
396
|
+
<span class="position-number">5</span>
|
|
397
|
+
<span class="position-label">Back Right</span>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="position-content">
|
|
400
|
+
<div class="unit-display">
|
|
401
|
+
<div class="empty-slot">Empty Slot</div>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</div>
|
|
406
|
+
</section>
|
|
407
|
+
|
|
408
|
+
<!-- Unit Selection Section -->
|
|
409
|
+
<section id="units" class="section">
|
|
410
|
+
<h2>Unit Roster</h2>
|
|
411
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
412
|
+
Select units to add to your team. Each unit displays their element type.
|
|
413
|
+
</p>
|
|
414
|
+
|
|
415
|
+
<div class="unit-grid">
|
|
416
|
+
<div class="unit-card">
|
|
417
|
+
<h5>Scarlet Priest Abe</h5>
|
|
418
|
+
<span class="element-badge element-electric">Electric</span>
|
|
419
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
420
|
+
Fire Damage Dealer
|
|
421
|
+
</p>
|
|
422
|
+
</div>
|
|
423
|
+
|
|
424
|
+
<div class="unit-card">
|
|
425
|
+
<h5>Soldier A Rapi</h5>
|
|
426
|
+
<span class="element-badge element-fire">Fire</span>
|
|
427
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
428
|
+
Penetration Type
|
|
429
|
+
</p>
|
|
430
|
+
</div>
|
|
431
|
+
|
|
432
|
+
<div class="unit-card">
|
|
433
|
+
<h5>Trap Lyudmila</h5>
|
|
434
|
+
<span class="element-badge element-water">Water</span>
|
|
435
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
436
|
+
Support/Debuffer
|
|
437
|
+
</p>
|
|
438
|
+
</div>
|
|
439
|
+
|
|
440
|
+
<div class="unit-card">
|
|
441
|
+
<h5>Fortress Maid Dolla</h5>
|
|
442
|
+
<span class="element-badge element-iron">Iron</span>
|
|
443
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
444
|
+
Tanker/Defender
|
|
445
|
+
</p>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<div class="unit-card">
|
|
449
|
+
<h5>Sniper Rapunzel</h5>
|
|
450
|
+
<span class="element-badge element-wind">Wind</span>
|
|
451
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
452
|
+
Fire Damage Dealer
|
|
453
|
+
</p>
|
|
454
|
+
</div>
|
|
455
|
+
|
|
456
|
+
<div class="unit-card">
|
|
457
|
+
<h5>Mech Specialist Snow White</h5>
|
|
458
|
+
<span class="element-badge element-electric">Electric</span>
|
|
459
|
+
<p style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-sm);">
|
|
460
|
+
Rocket Damage Dealer
|
|
461
|
+
</p>
|
|
462
|
+
</div>
|
|
463
|
+
</div>
|
|
464
|
+
</section>
|
|
465
|
+
|
|
466
|
+
<!-- Code Examples Section -->
|
|
467
|
+
<section id="code" class="section">
|
|
468
|
+
<h2>Code Examples</h2>
|
|
469
|
+
|
|
470
|
+
<div class="tabs">
|
|
471
|
+
<button class="tab-button active" onclick="switchTab(event, 'element-pill')">Element Pill</button>
|
|
472
|
+
<button class="tab-button" onclick="switchTab(event, 'element-badge')">Element Badge</button>
|
|
473
|
+
<button class="tab-button" onclick="switchTab(event, 'position-card')">Position Card</button>
|
|
474
|
+
<button class="tab-button" onclick="switchTab(event, 'unit-selection')">Unit Selection</button>
|
|
475
|
+
</div>
|
|
476
|
+
|
|
477
|
+
<div id="element-pill" class="tab-content active">
|
|
478
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Element Selection Pills</h3>
|
|
479
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
480
|
+
Use element pills for interactive element selection or filtering.
|
|
481
|
+
</p>
|
|
482
|
+
<div class="code-example">
|
|
483
|
+
<div class="element-pills">
|
|
484
|
+
<button class="element-pill water">Water</button>
|
|
485
|
+
<button class="element-pill wind">Wind</button>
|
|
486
|
+
<button class="element-pill iron">Iron</button>
|
|
487
|
+
<button class="element-pill electric">Electric</button>
|
|
488
|
+
<button class="element-pill fire active">Fire</button>
|
|
489
|
+
</div>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
|
|
493
|
+
<div id="element-badge" class="tab-content">
|
|
494
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Element Badges</h3>
|
|
495
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
496
|
+
Display element type consistently across units and bosses.
|
|
497
|
+
</p>
|
|
498
|
+
<div class="code-example">
|
|
499
|
+
<!-- Outlined badge (default) -->
|
|
500
|
+
<span class="element-badge element-fire">Fire</span>
|
|
501
|
+
|
|
502
|
+
<!-- Solid badge (prominent) -->
|
|
503
|
+
<span class="element-badge solid element-fire">Fire</span>
|
|
504
|
+
|
|
505
|
+
<!-- Outline only (subtle) -->
|
|
506
|
+
<span class="element-badge outline element-fire">Fire</span>
|
|
507
|
+
</div>
|
|
508
|
+
</div>
|
|
509
|
+
|
|
510
|
+
<div id="position-card" class="tab-content">
|
|
511
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Position Cards</h3>
|
|
512
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
513
|
+
Build 5-unit teams with position cards and state management.
|
|
514
|
+
</p>
|
|
515
|
+
<div class="code-example">
|
|
516
|
+
<div class="team-position-cards">
|
|
517
|
+
<div class="position-card filled">
|
|
518
|
+
<div class="position-header">
|
|
519
|
+
<span class="position-number">1</span>
|
|
520
|
+
<span class="position-label">Front Left</span>
|
|
521
|
+
</div>
|
|
522
|
+
<div class="position-content">
|
|
523
|
+
<div class="unit-display">
|
|
524
|
+
<div class="unit-name">Unit Name</div>
|
|
525
|
+
</div>
|
|
526
|
+
</div>
|
|
527
|
+
</div>
|
|
528
|
+
</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
|
|
532
|
+
<div id="unit-selection" class="tab-content">
|
|
533
|
+
<h3 style="color: var(--accent); margin-bottom: var(--spacing-md);">Unit Selection Buttons</h3>
|
|
534
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
535
|
+
Pill-style buttons for selecting units with element badge.
|
|
536
|
+
</p>
|
|
537
|
+
<div class="code-example">
|
|
538
|
+
<div class="unit-grid">
|
|
539
|
+
<div class="unit-card">
|
|
540
|
+
<h5>Scarlet Priest Abe</h5>
|
|
541
|
+
<span class="element-badge element-electric">
|
|
542
|
+
Electric
|
|
543
|
+
</span>
|
|
544
|
+
<p>Fire Damage Dealer</p>
|
|
545
|
+
</div>
|
|
546
|
+
</div>
|
|
547
|
+
</div>
|
|
548
|
+
</div>
|
|
549
|
+
</section>
|
|
550
|
+
|
|
551
|
+
<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);">
|
|
552
|
+
<p>Nikke Team Builder Example • Corrupted Theme v0.1.0</p>
|
|
553
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
554
|
+
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a> •
|
|
555
|
+
<a href="../docs/NIKKE_COMPONENTS.md" style="color: var(--accent); text-decoration: none;">Documentation</a>
|
|
556
|
+
</p>
|
|
557
|
+
</footer>
|
|
558
|
+
</div>
|
|
559
|
+
|
|
560
|
+
<script>
|
|
561
|
+
function removeUnit(position) {
|
|
562
|
+
alert(`Remove unit from position ${position}`);
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
function switchTab(event, tabName) {
|
|
566
|
+
// Hide all tab contents
|
|
567
|
+
const contents = document.querySelectorAll('.tab-content');
|
|
568
|
+
contents.forEach(content => content.classList.remove('active'));
|
|
569
|
+
|
|
570
|
+
// Remove active class from all buttons
|
|
571
|
+
const buttons = document.querySelectorAll('.tab-button');
|
|
572
|
+
buttons.forEach(button => button.classList.remove('active'));
|
|
573
|
+
|
|
574
|
+
// Show the selected tab
|
|
575
|
+
document.getElementById(tabName).classList.add('active');
|
|
576
|
+
event.target.classList.add('active');
|
|
577
|
+
}
|
|
578
|
+
</script>
|
|
579
|
+
</body>
|
|
580
|
+
</html>
|