@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,520 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Corrupted Theme - 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
|
+
<style>
|
|
10
|
+
.showcase {
|
|
11
|
+
max-width: 1200px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.showcase-section {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.showcase-section h2 {
|
|
21
|
+
color: var(--accent);
|
|
22
|
+
margin-bottom: var(--spacing-lg);
|
|
23
|
+
padding-bottom: var(--spacing-md);
|
|
24
|
+
border-bottom: 2px solid var(--border);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.showcase-grid {
|
|
28
|
+
display: grid;
|
|
29
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
30
|
+
gap: var(--spacing-lg);
|
|
31
|
+
margin-bottom: var(--spacing-lg);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.code-example {
|
|
35
|
+
background: var(--glass);
|
|
36
|
+
border: 1px solid var(--border);
|
|
37
|
+
border-radius: var(--radius-lg);
|
|
38
|
+
padding: var(--spacing-md);
|
|
39
|
+
margin-top: var(--spacing-md);
|
|
40
|
+
font-family: 'Courier New', monospace;
|
|
41
|
+
font-size: 0.875rem;
|
|
42
|
+
overflow-x: auto;
|
|
43
|
+
color: var(--text-secondary);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.demo-container {
|
|
47
|
+
background: var(--glass);
|
|
48
|
+
border: 1px solid var(--border);
|
|
49
|
+
border-radius: var(--radius-lg);
|
|
50
|
+
padding: var(--spacing-lg);
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-wrap: wrap;
|
|
53
|
+
gap: var(--spacing-md);
|
|
54
|
+
align-items: center;
|
|
55
|
+
justify-content: center;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.nav-demo {
|
|
59
|
+
width: 100%;
|
|
60
|
+
background: var(--bg-secondary);
|
|
61
|
+
border-radius: var(--radius-lg);
|
|
62
|
+
padding: var(--spacing-md);
|
|
63
|
+
margin-bottom: var(--spacing-lg);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.nav-links {
|
|
67
|
+
display: flex;
|
|
68
|
+
gap: var(--spacing-lg);
|
|
69
|
+
flex-wrap: wrap;
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
.nav-links a {
|
|
73
|
+
color: var(--text-secondary);
|
|
74
|
+
text-decoration: none;
|
|
75
|
+
padding: var(--spacing-sm) var(--spacing-md);
|
|
76
|
+
border-radius: var(--radius-md);
|
|
77
|
+
transition: all var(--transition-normal);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.nav-links a:hover,
|
|
81
|
+
.nav-links a.active {
|
|
82
|
+
color: var(--text);
|
|
83
|
+
background: rgba(217, 79, 144, 0.15);
|
|
84
|
+
border-color: var(--accent);
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.hero {
|
|
88
|
+
background: var(--gradient-accent);
|
|
89
|
+
color: white;
|
|
90
|
+
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
91
|
+
border-radius: var(--radius-xl);
|
|
92
|
+
text-align: center;
|
|
93
|
+
margin-bottom: var(--spacing-2xl);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.hero h1 {
|
|
97
|
+
font-size: 2.5rem;
|
|
98
|
+
margin-bottom: var(--spacing-md);
|
|
99
|
+
color: white;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.hero p {
|
|
103
|
+
font-size: 1.1rem;
|
|
104
|
+
margin-bottom: var(--spacing-lg);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.form-demo {
|
|
108
|
+
max-width: 500px;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
.form-demo label {
|
|
112
|
+
display: block;
|
|
113
|
+
margin-bottom: var(--spacing-sm);
|
|
114
|
+
color: var(--text);
|
|
115
|
+
font-weight: 500;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.form-demo input,
|
|
119
|
+
.form-demo textarea,
|
|
120
|
+
.form-demo select {
|
|
121
|
+
width: 100%;
|
|
122
|
+
margin-bottom: var(--spacing-lg);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.grid-demo {
|
|
126
|
+
display: grid;
|
|
127
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
128
|
+
gap: var(--spacing-lg);
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.grid-item {
|
|
132
|
+
background: var(--glass);
|
|
133
|
+
border: 1px solid var(--border);
|
|
134
|
+
padding: var(--spacing-lg);
|
|
135
|
+
border-radius: var(--radius-lg);
|
|
136
|
+
text-align: center;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
.animation-demo {
|
|
140
|
+
display: flex;
|
|
141
|
+
gap: var(--spacing-lg);
|
|
142
|
+
flex-wrap: wrap;
|
|
143
|
+
justify-content: center;
|
|
144
|
+
align-items: center;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.animated-box {
|
|
148
|
+
width: 100px;
|
|
149
|
+
height: 100px;
|
|
150
|
+
background: var(--gradient-accent);
|
|
151
|
+
border-radius: var(--radius-lg);
|
|
152
|
+
display: flex;
|
|
153
|
+
align-items: center;
|
|
154
|
+
justify-content: center;
|
|
155
|
+
color: white;
|
|
156
|
+
font-weight: bold;
|
|
157
|
+
font-size: 0.875rem;
|
|
158
|
+
text-align: center;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.animation-control {
|
|
162
|
+
display: flex;
|
|
163
|
+
gap: var(--spacing-md);
|
|
164
|
+
margin-top: var(--spacing-lg);
|
|
165
|
+
flex-wrap: wrap;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.animation-control button {
|
|
169
|
+
flex: 1;
|
|
170
|
+
min-width: 150px;
|
|
171
|
+
}
|
|
172
|
+
</style>
|
|
173
|
+
</head>
|
|
174
|
+
<body>
|
|
175
|
+
<!-- Navigation -->
|
|
176
|
+
<nav class="navbar">
|
|
177
|
+
<div class="navbar-content">
|
|
178
|
+
<a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
179
|
+
<div class="navbar-links">
|
|
180
|
+
<a href="#buttons" class="nav-link">Buttons</a>
|
|
181
|
+
<a href="#cards" class="nav-link">Cards</a>
|
|
182
|
+
<a href="#forms" class="nav-link">Forms</a>
|
|
183
|
+
<a href="#badges" class="nav-link">Badges</a>
|
|
184
|
+
<a href="#animations" class="nav-link">Animations</a>
|
|
185
|
+
<a href="#grid" class="nav-link">Grid</a>
|
|
186
|
+
</div>
|
|
187
|
+
</div>
|
|
188
|
+
</nav>
|
|
189
|
+
|
|
190
|
+
<div class="showcase">
|
|
191
|
+
<!-- Hero Section -->
|
|
192
|
+
<section class="hero">
|
|
193
|
+
<h1>Corrupted Theme Showcase</h1>
|
|
194
|
+
<p>A modern, dark design system with glassmorphism effects</p>
|
|
195
|
+
<p style="font-size: 0.95rem; opacity: 0.9;">
|
|
196
|
+
Complete component library with animations, accessibility, and full customization
|
|
197
|
+
</p>
|
|
198
|
+
</section>
|
|
199
|
+
|
|
200
|
+
<!-- Buttons Section -->
|
|
201
|
+
<section class="showcase-section" id="buttons">
|
|
202
|
+
<h2><i class="fas fa-square"></i> Buttons</h2>
|
|
203
|
+
|
|
204
|
+
<div class="demo-container">
|
|
205
|
+
<button class="btn"><i class="fas fa-mouse"></i> Primary</button>
|
|
206
|
+
<button class="btn btn-secondary"><i class="fas fa-star"></i> Secondary</button>
|
|
207
|
+
<button class="btn btn-ghost"><i class="fas fa-ghost"></i> Ghost</button>
|
|
208
|
+
<button class="btn btn-sm">Small</button>
|
|
209
|
+
<button class="btn btn-lg">Large</button>
|
|
210
|
+
<button class="btn" disabled>Disabled</button>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="code-example">
|
|
214
|
+
<button class="btn">Primary Button</button>
|
|
215
|
+
<button class="btn btn-secondary">Secondary</button>
|
|
216
|
+
<button class="btn btn-ghost">Ghost</button>
|
|
217
|
+
<button class="btn btn-sm">Small</button>
|
|
218
|
+
<button class="btn btn-lg">Large</button>
|
|
219
|
+
<button class="btn" disabled>Disabled</button>
|
|
220
|
+
</div>
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
<!-- Cards Section -->
|
|
224
|
+
<section class="showcase-section" id="cards">
|
|
225
|
+
<h2><i class="fas fa-rectangle"></i> Cards</h2>
|
|
226
|
+
|
|
227
|
+
<div class="showcase-grid">
|
|
228
|
+
<div class="card">
|
|
229
|
+
<h3>Standard Card</h3>
|
|
230
|
+
<p>This is a card component with the default glass effect applied.</p>
|
|
231
|
+
<a href="#" style="display: inline-block; margin-top: var(--spacing-md);">Learn more →</a>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div class="card">
|
|
235
|
+
<h3><i class="fas fa-star"></i> Featured Card</h3>
|
|
236
|
+
<p>Cards support icons, headings, and rich content.</p>
|
|
237
|
+
<button class="btn btn-sm">Action</button>
|
|
238
|
+
</div>
|
|
239
|
+
|
|
240
|
+
<div class="frosted-card">
|
|
241
|
+
<h3>Frosted Glass Card</h3>
|
|
242
|
+
<p>Enhanced glass effect with stronger blur and opacity.</p>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="code-example">
|
|
247
|
+
<div class="card">
|
|
248
|
+
<h3>Card Title</h3>
|
|
249
|
+
<p>Card content goes here...</p>
|
|
250
|
+
<a href="#">Link</a>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div class="frosted-card">
|
|
254
|
+
<h3>Frosted Glass Card</h3>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
</section>
|
|
258
|
+
|
|
259
|
+
<!-- Badges Section -->
|
|
260
|
+
<section class="showcase-section" id="badges">
|
|
261
|
+
<h2><i class="fas fa-tag"></i> Badges & Tags</h2>
|
|
262
|
+
|
|
263
|
+
<div class="demo-container">
|
|
264
|
+
<span class="badge">Default</span>
|
|
265
|
+
<span class="badge badge-primary">Primary</span>
|
|
266
|
+
<span class="badge badge-secondary">Secondary</span>
|
|
267
|
+
<span class="badge badge-success">Success</span>
|
|
268
|
+
<span class="badge badge-warning">Warning</span>
|
|
269
|
+
<span class="badge badge-error">Error</span>
|
|
270
|
+
</div>
|
|
271
|
+
|
|
272
|
+
<div class="code-example">
|
|
273
|
+
<span class="badge">Default</span>
|
|
274
|
+
<span class="badge badge-primary">Primary</span>
|
|
275
|
+
<span class="badge badge-success">Success</span>
|
|
276
|
+
<span class="badge badge-warning">Warning</span>
|
|
277
|
+
<span class="badge badge-error">Error</span>
|
|
278
|
+
</div>
|
|
279
|
+
</section>
|
|
280
|
+
|
|
281
|
+
<!-- Alerts Section -->
|
|
282
|
+
<section class="showcase-section">
|
|
283
|
+
<h2><i class="fas fa-bell"></i> Alerts</h2>
|
|
284
|
+
|
|
285
|
+
<div style="display: grid; gap: var(--spacing-lg);">
|
|
286
|
+
<div class="alert alert-success">
|
|
287
|
+
<i class="fas fa-check-circle"></i> Success! Operation completed successfully.
|
|
288
|
+
</div>
|
|
289
|
+
<div class="alert alert-info">
|
|
290
|
+
<i class="fas fa-info-circle"></i> Info: Here's some helpful information.
|
|
291
|
+
</div>
|
|
292
|
+
<div class="alert alert-warning">
|
|
293
|
+
<i class="fas fa-exclamation-triangle"></i> Warning: Please review this carefully.
|
|
294
|
+
</div>
|
|
295
|
+
<div class="alert alert-error">
|
|
296
|
+
<i class="fas fa-times-circle"></i> Error: Something went wrong.
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
|
|
300
|
+
<div class="code-example">
|
|
301
|
+
<div class="alert alert-success">
|
|
302
|
+
Success message here
|
|
303
|
+
</div>
|
|
304
|
+
<div class="alert alert-error">
|
|
305
|
+
Error message here
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
308
|
+
</section>
|
|
309
|
+
|
|
310
|
+
<!-- Forms Section -->
|
|
311
|
+
<section class="showcase-section" id="forms">
|
|
312
|
+
<h2><i class="fas fa-form"></i> Forms</h2>
|
|
313
|
+
|
|
314
|
+
<div class="form-demo">
|
|
315
|
+
<label for="name">Name *</label>
|
|
316
|
+
<input type="text" id="name" placeholder="Enter your name" required>
|
|
317
|
+
|
|
318
|
+
<label for="email">Email *</label>
|
|
319
|
+
<input type="email" id="email" placeholder="your@email.com" required>
|
|
320
|
+
|
|
321
|
+
<label for="category">Category</label>
|
|
322
|
+
<select id="category">
|
|
323
|
+
<option>Select a category</option>
|
|
324
|
+
<option>Feature</option>
|
|
325
|
+
<option>Bug Report</option>
|
|
326
|
+
<option>Feedback</option>
|
|
327
|
+
</select>
|
|
328
|
+
|
|
329
|
+
<label for="message">Message</label>
|
|
330
|
+
<textarea id="message" rows="4" placeholder="Your message here..."></textarea>
|
|
331
|
+
|
|
332
|
+
<label style="display: flex; align-items: center; margin-bottom: var(--spacing-lg);">
|
|
333
|
+
<input type="checkbox" style="width: auto; margin-right: var(--spacing-sm);">
|
|
334
|
+
<span>I agree to the terms and conditions</span>
|
|
335
|
+
</label>
|
|
336
|
+
|
|
337
|
+
<button class="btn" style="width: 100%;">Submit Form</button>
|
|
338
|
+
</div>
|
|
339
|
+
|
|
340
|
+
<div class="code-example">
|
|
341
|
+
<label for="email">Email</label>
|
|
342
|
+
<input type="email" id="email" placeholder="..." required>
|
|
343
|
+
|
|
344
|
+
<label for="message">Message</label>
|
|
345
|
+
<textarea id="message" rows="4"></textarea>
|
|
346
|
+
|
|
347
|
+
<label>
|
|
348
|
+
<input type="checkbox">
|
|
349
|
+
Agree to terms
|
|
350
|
+
</label>
|
|
351
|
+
</div>
|
|
352
|
+
</section>
|
|
353
|
+
|
|
354
|
+
<!-- Grid Section -->
|
|
355
|
+
<section class="showcase-section" id="grid">
|
|
356
|
+
<h2><i class="fas fa-th"></i> Grid Layouts</h2>
|
|
357
|
+
|
|
358
|
+
<h3 style="margin-top: var(--spacing-lg); margin-bottom: var(--spacing-md);">Grid - 3 Columns</h3>
|
|
359
|
+
<div class="grid-demo" style="grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));">
|
|
360
|
+
<div class="grid-item">
|
|
361
|
+
<i class="fas fa-cube" style="font-size: 2rem; color: var(--accent); margin-bottom: var(--spacing-md);"></i>
|
|
362
|
+
<p>Column 1</p>
|
|
363
|
+
</div>
|
|
364
|
+
<div class="grid-item">
|
|
365
|
+
<i class="fas fa-cube" style="font-size: 2rem; color: var(--accent); margin-bottom: var(--spacing-md);"></i>
|
|
366
|
+
<p>Column 2</p>
|
|
367
|
+
</div>
|
|
368
|
+
<div class="grid-item">
|
|
369
|
+
<i class="fas fa-cube" style="font-size: 2rem; color: var(--accent); margin-bottom: var(--spacing-md);"></i>
|
|
370
|
+
<p>Column 3</p>
|
|
371
|
+
</div>
|
|
372
|
+
</div>
|
|
373
|
+
|
|
374
|
+
<div class="code-example">
|
|
375
|
+
<div class="grid-demo">
|
|
376
|
+
<div class="grid-item">Item 1</div>
|
|
377
|
+
<div class="grid-item">Item 2</div>
|
|
378
|
+
<div class="grid-item">Item 3</div>
|
|
379
|
+
</div>
|
|
380
|
+
</div>
|
|
381
|
+
</section>
|
|
382
|
+
|
|
383
|
+
<!-- Animations Section -->
|
|
384
|
+
<section class="showcase-section" id="animations">
|
|
385
|
+
<h2><i class="fas fa-magic"></i> Animations</h2>
|
|
386
|
+
|
|
387
|
+
<div class="animation-demo">
|
|
388
|
+
<div class="animated-box fade-in">Fade In</div>
|
|
389
|
+
<div class="animated-box slide-in">Slide In</div>
|
|
390
|
+
<div class="animated-box scale-in">Scale In</div>
|
|
391
|
+
<div class="animated-box pulse">Pulse</div>
|
|
392
|
+
</div>
|
|
393
|
+
|
|
394
|
+
<div class="animation-control">
|
|
395
|
+
<button class="btn" onclick="triggerAnimation('fade-in')">
|
|
396
|
+
<i class="fas fa-circle-notch"></i> Fade In
|
|
397
|
+
</button>
|
|
398
|
+
<button class="btn" onclick="triggerAnimation('slide-in')">
|
|
399
|
+
<i class="fas fa-arrow-right"></i> Slide In
|
|
400
|
+
</button>
|
|
401
|
+
<button class="btn" onclick="triggerAnimation('scale-in')">
|
|
402
|
+
<i class="fas fa-expand"></i> Scale In
|
|
403
|
+
</button>
|
|
404
|
+
<button class="btn" onclick="triggerAnimation('float')">
|
|
405
|
+
<i class="fas fa-arrow-up"></i> Float
|
|
406
|
+
</button>
|
|
407
|
+
</div>
|
|
408
|
+
|
|
409
|
+
<div class="code-example">
|
|
410
|
+
<div class="animated-box fade-in">Fade In</div>
|
|
411
|
+
<div class="animated-box slide-in">Slide In</div>
|
|
412
|
+
<div class="animated-box scale-in">Scale In</div>
|
|
413
|
+
<div class="animated-box pulse">Pulse</div>
|
|
414
|
+
</div>
|
|
415
|
+
</section>
|
|
416
|
+
|
|
417
|
+
<!-- Colors Section -->
|
|
418
|
+
<section class="showcase-section">
|
|
419
|
+
<h2><i class="fas fa-palette"></i> Color Palette</h2>
|
|
420
|
+
|
|
421
|
+
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--spacing-lg);">
|
|
422
|
+
<div style="background: var(--accent); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; color: white;">
|
|
423
|
+
<strong>Accent</strong><br>#d94f90
|
|
424
|
+
</div>
|
|
425
|
+
<div style="background: var(--accent-light); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; color: white;">
|
|
426
|
+
<strong>Accent Light</strong><br>#e86ca8
|
|
427
|
+
</div>
|
|
428
|
+
<div style="background: var(--accent-dark); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; color: white;">
|
|
429
|
+
<strong>Accent Dark</strong><br>#b61b70
|
|
430
|
+
</div>
|
|
431
|
+
<div style="background: var(--bg); border: 2px solid var(--border); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center;">
|
|
432
|
+
<strong>Background</strong><br>#0a0a0a
|
|
433
|
+
</div>
|
|
434
|
+
<div style="background: var(--text); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center; color: var(--bg);">
|
|
435
|
+
<strong>Text</strong><br>#f5f1f8
|
|
436
|
+
</div>
|
|
437
|
+
<div style="background: var(--glass); border: 1px solid var(--border); padding: var(--spacing-lg); border-radius: var(--radius-lg); text-align: center;">
|
|
438
|
+
<strong>Glass</strong><br>rgba(20, 12, 40, 0.7)
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
|
|
442
|
+
<p style="margin-top: var(--spacing-lg); color: var(--text-secondary);">
|
|
443
|
+
<strong>Note:</strong> All colors meet WCAG AA or AAA contrast standards. See COLOR_PALETTE.md for complete details.
|
|
444
|
+
</p>
|
|
445
|
+
</section>
|
|
446
|
+
|
|
447
|
+
<!-- Spacing Section -->
|
|
448
|
+
<section class="showcase-section">
|
|
449
|
+
<h2><i class="fas fa-arrows-alt"></i> Spacing Scale</h2>
|
|
450
|
+
|
|
451
|
+
<div style="display: grid; gap: var(--spacing-lg);">
|
|
452
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
453
|
+
<div style="width: 200px; background: var(--accent); height: 2px;"></div>
|
|
454
|
+
<span>xs (4px)</span>
|
|
455
|
+
</div>
|
|
456
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
457
|
+
<div style="width: 200px; background: var(--accent); height: 2px;"></div>
|
|
458
|
+
<span>sm (8px)</span>
|
|
459
|
+
</div>
|
|
460
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
461
|
+
<div style="width: 250px; background: var(--accent); height: 2px;"></div>
|
|
462
|
+
<span>md (16px)</span>
|
|
463
|
+
</div>
|
|
464
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
465
|
+
<div style="width: 300px; background: var(--accent); height: 2px;"></div>
|
|
466
|
+
<span>lg (24px)</span>
|
|
467
|
+
</div>
|
|
468
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
469
|
+
<div style="width: 350px; background: var(--accent); height: 2px;"></div>
|
|
470
|
+
<span>xl (32px)</span>
|
|
471
|
+
</div>
|
|
472
|
+
<div style="display: flex; align-items: center; gap: var(--spacing-md);">
|
|
473
|
+
<div style="width: 400px; background: var(--accent); height: 2px;"></div>
|
|
474
|
+
<span>2xl (48px)</span>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
</section>
|
|
478
|
+
|
|
479
|
+
<!-- Footer -->
|
|
480
|
+
<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);">
|
|
481
|
+
<p>Corrupted Theme v0.1.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
|
|
482
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
483
|
+
<a href="../README.md" style="color: var(--accent); text-decoration: none;">Documentation</a> •
|
|
484
|
+
<a href="../docs/CUSTOMIZATION.md" style="color: var(--accent); text-decoration: none;">Customization</a> •
|
|
485
|
+
<a href="https://github.com/whykusanagi/corrupted-theme" style="color: var(--accent); text-decoration: none;">GitHub</a>
|
|
486
|
+
</p>
|
|
487
|
+
</footer>
|
|
488
|
+
</div>
|
|
489
|
+
|
|
490
|
+
<script>
|
|
491
|
+
function triggerAnimation(animationClass) {
|
|
492
|
+
const boxes = document.querySelectorAll('.animated-box');
|
|
493
|
+
|
|
494
|
+
// Remove all animation classes
|
|
495
|
+
boxes.forEach(box => {
|
|
496
|
+
box.classList.remove('fade-in', 'slide-in', 'scale-in', 'float', 'pulse', 'breathe', 'shimmer');
|
|
497
|
+
});
|
|
498
|
+
|
|
499
|
+
// Trigger reflow to restart animation
|
|
500
|
+
void boxes[0].offsetWidth;
|
|
501
|
+
|
|
502
|
+
// Add the selected animation
|
|
503
|
+
boxes.forEach(box => {
|
|
504
|
+
box.classList.add(animationClass);
|
|
505
|
+
});
|
|
506
|
+
}
|
|
507
|
+
|
|
508
|
+
// Add smooth scroll behavior
|
|
509
|
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
510
|
+
anchor.addEventListener('click', function(e) {
|
|
511
|
+
e.preventDefault();
|
|
512
|
+
const target = document.querySelector(this.getAttribute('href'));
|
|
513
|
+
if (target) {
|
|
514
|
+
target.scrollIntoView({ behavior: 'smooth' });
|
|
515
|
+
}
|
|
516
|
+
});
|
|
517
|
+
});
|
|
518
|
+
</script>
|
|
519
|
+
</body>
|
|
520
|
+
</html>
|