@whykusanagi/corrupted-theme 0.1.0 → 0.1.2
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 +162 -0
- package/README.md +209 -14
- package/docs/COMPONENTS_REFERENCE.md +295 -8
- package/examples/assets/celeste-avatar.png +0 -0
- package/examples/button.html +21 -9
- package/examples/card.html +21 -8
- package/examples/extensions-showcase.html +716 -0
- package/examples/form.html +21 -8
- package/examples/index.html +619 -396
- package/examples/layout.html +21 -7
- package/examples/nikke-team-builder.html +22 -8
- package/examples/showcase-complete.html +44 -13
- package/examples/showcase.html +20 -7
- package/package.json +12 -5
- package/src/css/components.css +101 -2
- package/src/css/extensions.css +933 -0
- package/src/css/theme.css +6 -176
- package/src/css/typography.css +5 -0
- package/src/css/variables.css +1 -1
- package/src/lib/countdown-widget.js +609 -0
- package/src/lib/gallery.js +481 -0
|
@@ -0,0 +1,716 @@
|
|
|
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 - Extensions 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
|
+
body {
|
|
11
|
+
background: var(--bg);
|
|
12
|
+
color: var(--text);
|
|
13
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
14
|
+
line-height: 1.6;
|
|
15
|
+
padding: 0;
|
|
16
|
+
margin: 0;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.showcase {
|
|
20
|
+
max-width: 1400px;
|
|
21
|
+
margin: 0 auto;
|
|
22
|
+
padding: var(--spacing-xl);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.showcase-section {
|
|
26
|
+
margin-bottom: var(--spacing-2xl);
|
|
27
|
+
padding-bottom: var(--spacing-2xl);
|
|
28
|
+
border-bottom: 1px solid var(--border);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.showcase-section:last-child {
|
|
32
|
+
border-bottom: none;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.showcase-section h2 {
|
|
36
|
+
color: var(--accent);
|
|
37
|
+
margin-bottom: var(--spacing-md);
|
|
38
|
+
padding-bottom: var(--spacing-md);
|
|
39
|
+
border-bottom: 2px solid var(--border);
|
|
40
|
+
font-size: 2rem;
|
|
41
|
+
display: flex;
|
|
42
|
+
align-items: center;
|
|
43
|
+
gap: var(--spacing-md);
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.showcase-section h2 i {
|
|
47
|
+
font-size: 1.5rem;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.showcase-section h3 {
|
|
51
|
+
color: var(--text);
|
|
52
|
+
margin-top: var(--spacing-xl);
|
|
53
|
+
margin-bottom: var(--spacing-md);
|
|
54
|
+
font-size: 1.25rem;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.showcase-description {
|
|
58
|
+
color: var(--text-secondary);
|
|
59
|
+
margin-bottom: var(--spacing-lg);
|
|
60
|
+
max-width: 800px;
|
|
61
|
+
line-height: 1.7;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.code-example {
|
|
65
|
+
background: var(--glass-darker);
|
|
66
|
+
border: 1px solid var(--border);
|
|
67
|
+
border-radius: var(--radius-lg);
|
|
68
|
+
padding: var(--spacing-md);
|
|
69
|
+
margin-top: var(--spacing-md);
|
|
70
|
+
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
|
71
|
+
font-size: 0.85rem;
|
|
72
|
+
overflow-x: auto;
|
|
73
|
+
color: var(--text-secondary);
|
|
74
|
+
white-space: pre-wrap;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.demo-container {
|
|
78
|
+
background: var(--glass);
|
|
79
|
+
border: 1px solid var(--border);
|
|
80
|
+
border-radius: var(--radius-lg);
|
|
81
|
+
padding: var(--spacing-lg);
|
|
82
|
+
margin-bottom: var(--spacing-md);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.hero {
|
|
86
|
+
background: linear-gradient(135deg, rgba(217, 79, 144, 0.3), rgba(139, 92, 246, 0.3));
|
|
87
|
+
border: 1px solid var(--border);
|
|
88
|
+
color: white;
|
|
89
|
+
padding: var(--spacing-2xl) var(--spacing-lg);
|
|
90
|
+
border-radius: var(--radius-xl);
|
|
91
|
+
text-align: center;
|
|
92
|
+
margin-bottom: var(--spacing-2xl);
|
|
93
|
+
backdrop-filter: blur(10px);
|
|
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
|
+
opacity: 0.9;
|
|
105
|
+
max-width: 600px;
|
|
106
|
+
margin: 0 auto;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
/* Demo-specific styles */
|
|
110
|
+
.gallery-demo-images img {
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 200px;
|
|
113
|
+
object-fit: cover;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
.countdown-demo-container {
|
|
117
|
+
min-height: 500px;
|
|
118
|
+
display: flex;
|
|
119
|
+
align-items: center;
|
|
120
|
+
justify-content: center;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.social-demo-bg {
|
|
124
|
+
background: linear-gradient(180deg, rgba(5, 0, 16, 0.9), rgba(10, 10, 10, 0.95));
|
|
125
|
+
padding: var(--spacing-2xl);
|
|
126
|
+
border-radius: var(--radius-xl);
|
|
127
|
+
}
|
|
128
|
+
</style>
|
|
129
|
+
</head>
|
|
130
|
+
<body>
|
|
131
|
+
<!-- Navigation -->
|
|
132
|
+
<!-- Global Navigation -->
|
|
133
|
+
<nav class="navbar">
|
|
134
|
+
<div class="navbar-content">
|
|
135
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
|
|
136
|
+
<ul class="navbar-links">
|
|
137
|
+
<li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
|
|
138
|
+
<li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
|
|
139
|
+
<li class="has-submenu">
|
|
140
|
+
<a href="#" class="active">
|
|
141
|
+
<i class="fas fa-puzzle-piece"></i> Extensions
|
|
142
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
143
|
+
</a>
|
|
144
|
+
<div class="submenu">
|
|
145
|
+
<a href="#gallery"><i class="fas fa-images"></i> Gallery</a>
|
|
146
|
+
<a href="#lightbox"><i class="fas fa-expand"></i> Lightbox</a>
|
|
147
|
+
<a href="#nsfw"><i class="fas fa-eye-slash"></i> NSFW Blur</a>
|
|
148
|
+
<a href="#social"><i class="fas fa-share-alt"></i> Social Links</a>
|
|
149
|
+
<a href="#countdown"><i class="fas fa-hourglass-half"></i> Countdown</a>
|
|
150
|
+
</div>
|
|
151
|
+
</li>
|
|
152
|
+
<li class="has-submenu">
|
|
153
|
+
<a href="#">
|
|
154
|
+
<i class="fas fa-flask"></i> Examples
|
|
155
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
156
|
+
</a>
|
|
157
|
+
<div class="submenu">
|
|
158
|
+
<a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
159
|
+
<a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
160
|
+
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
161
|
+
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
162
|
+
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
163
|
+
</div>
|
|
164
|
+
</li>
|
|
165
|
+
<li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
|
|
166
|
+
</ul>
|
|
167
|
+
</div>
|
|
168
|
+
</nav>
|
|
169
|
+
|
|
170
|
+
<div class="showcase">
|
|
171
|
+
<!-- Hero Section -->
|
|
172
|
+
<section class="hero">
|
|
173
|
+
<h1><i class="fas fa-puzzle-piece"></i> Extension Components</h1>
|
|
174
|
+
<p>
|
|
175
|
+
Production-tested components from whykusanagi.xyz for galleries,
|
|
176
|
+
social links, countdowns, and more.
|
|
177
|
+
</p>
|
|
178
|
+
</section>
|
|
179
|
+
|
|
180
|
+
<!-- ======================= GALLERY SYSTEM ======================= -->
|
|
181
|
+
<section class="showcase-section" id="gallery">
|
|
182
|
+
<h2><i class="fas fa-images"></i> Gallery System</h2>
|
|
183
|
+
<p class="showcase-description">
|
|
184
|
+
A complete gallery system with responsive grid layout, category filtering,
|
|
185
|
+
and lightbox integration. Perfect for portfolios, image galleries, and showcases.
|
|
186
|
+
</p>
|
|
187
|
+
|
|
188
|
+
<h3>Filter Bar</h3>
|
|
189
|
+
<div class="filter-bar" id="demo-filter-bar">
|
|
190
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
191
|
+
<button class="filter-btn" data-filter="landscape">Landscapes</button>
|
|
192
|
+
<button class="filter-btn" data-filter="abstract">Abstract</button>
|
|
193
|
+
<button class="filter-btn" data-filter="portrait">Portraits</button>
|
|
194
|
+
</div>
|
|
195
|
+
|
|
196
|
+
<h3>Gallery Grid</h3>
|
|
197
|
+
<div class="gallery-container gallery-demo-images" id="demo-gallery">
|
|
198
|
+
<div class="gallery-item" data-tags="landscape">
|
|
199
|
+
<img src="https://placehold.co/400x300/1a1a2e/d94f90?text=Landscape+1" alt="Mountain landscape">
|
|
200
|
+
<div class="gallery-caption">
|
|
201
|
+
<div class="title">Mountain Vista</div>
|
|
202
|
+
<div class="meta">Landscape • Nature</div>
|
|
203
|
+
</div>
|
|
204
|
+
</div>
|
|
205
|
+
<div class="gallery-item" data-tags="abstract">
|
|
206
|
+
<img src="https://placehold.co/400x300/2d1f3d/d94f90?text=Abstract+1" alt="Abstract colors">
|
|
207
|
+
<div class="gallery-caption">
|
|
208
|
+
<div class="title">Color Flow</div>
|
|
209
|
+
<div class="meta">Abstract • Digital</div>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
<div class="gallery-item" data-tags="portrait">
|
|
213
|
+
<img src="https://placehold.co/400x300/3d1f2d/d94f90?text=Portrait+1" alt="Portrait">
|
|
214
|
+
<div class="gallery-caption">
|
|
215
|
+
<div class="title">Portrait Study</div>
|
|
216
|
+
<div class="meta">Portrait • Photography</div>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
<div class="gallery-item" data-tags="landscape">
|
|
220
|
+
<img src="https://placehold.co/400x300/1f2d3d/d94f90?text=Landscape+2" alt="Forest">
|
|
221
|
+
<div class="gallery-caption">
|
|
222
|
+
<div class="title">Forest Path</div>
|
|
223
|
+
<div class="meta">Landscape • Nature</div>
|
|
224
|
+
</div>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="gallery-item" data-tags="abstract">
|
|
227
|
+
<img src="https://placehold.co/400x300/2d1f3d/d94f90?text=Abstract+2" alt="Abstract art">
|
|
228
|
+
<div class="gallery-caption">
|
|
229
|
+
<div class="title">Fluid Motion</div>
|
|
230
|
+
<div class="meta">Abstract • Art</div>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
<div class="gallery-item" data-tags="portrait">
|
|
234
|
+
<img src="https://placehold.co/400x300/3d1f2d/d94f90?text=Portrait+2" alt="Portrait 2">
|
|
235
|
+
<div class="gallery-caption">
|
|
236
|
+
<div class="title">Expression</div>
|
|
237
|
+
<div class="meta">Portrait • Studio</div>
|
|
238
|
+
</div>
|
|
239
|
+
</div>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<h3>Gallery Variants</h3>
|
|
243
|
+
<div class="demo-container">
|
|
244
|
+
<p style="margin-bottom: var(--spacing-md); color: var(--text-secondary);">
|
|
245
|
+
<code>.gallery-container.compact</code> - Smaller grid items<br>
|
|
246
|
+
<code>.gallery-container.large</code> - Larger grid items<br>
|
|
247
|
+
<code>.gallery-item.square</code> - 1:1 aspect ratio<br>
|
|
248
|
+
<code>.gallery-item.portrait</code> - 3:4 aspect ratio<br>
|
|
249
|
+
<code>.gallery-item.landscape</code> - 16:9 aspect ratio
|
|
250
|
+
</p>
|
|
251
|
+
</div>
|
|
252
|
+
|
|
253
|
+
<div class="code-example"><!-- HTML Structure -->
|
|
254
|
+
<div class="filter-bar">
|
|
255
|
+
<button class="filter-btn active" data-filter="all">All</button>
|
|
256
|
+
<button class="filter-btn" data-filter="photos">Photos</button>
|
|
257
|
+
</div>
|
|
258
|
+
|
|
259
|
+
<div class="gallery-container">
|
|
260
|
+
<div class="gallery-item" data-tags="photos">
|
|
261
|
+
<img src="image.jpg" alt="Description">
|
|
262
|
+
<div class="gallery-caption">
|
|
263
|
+
<div class="title">Image Title</div>
|
|
264
|
+
<div class="meta">Category • Date</div>
|
|
265
|
+
</div>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<!-- JavaScript -->
|
|
270
|
+
<script type="module">
|
|
271
|
+
import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
|
|
272
|
+
const gallery = initGallery('#demo-gallery');
|
|
273
|
+
</script></div>
|
|
274
|
+
</section>
|
|
275
|
+
|
|
276
|
+
<!-- ======================= LIGHTBOX ======================= -->
|
|
277
|
+
<section class="showcase-section" id="lightbox">
|
|
278
|
+
<h2><i class="fas fa-expand"></i> Lightbox</h2>
|
|
279
|
+
<p class="showcase-description">
|
|
280
|
+
Fullscreen image viewer with keyboard navigation (Arrow keys, Escape),
|
|
281
|
+
touch gestures for mobile, and image counter. Automatically integrates
|
|
282
|
+
with the gallery system.
|
|
283
|
+
</p>
|
|
284
|
+
|
|
285
|
+
<h3>Features</h3>
|
|
286
|
+
<div class="demo-container">
|
|
287
|
+
<ul style="color: var(--text-secondary); list-style: none; padding: 0;">
|
|
288
|
+
<li style="margin-bottom: var(--spacing-sm);"><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Click any gallery image to open lightbox</li>
|
|
289
|
+
<li style="margin-bottom: var(--spacing-sm);"><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Arrow keys for navigation</li>
|
|
290
|
+
<li style="margin-bottom: var(--spacing-sm);"><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Escape key to close</li>
|
|
291
|
+
<li style="margin-bottom: var(--spacing-sm);"><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Swipe gestures on mobile</li>
|
|
292
|
+
<li style="margin-bottom: var(--spacing-sm);"><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Click outside image to close</li>
|
|
293
|
+
<li><i class="fas fa-check" style="color: var(--accent); margin-right: var(--spacing-sm);"></i> Image counter and captions</li>
|
|
294
|
+
</ul>
|
|
295
|
+
</div>
|
|
296
|
+
|
|
297
|
+
<p style="color: var(--text-secondary); margin-top: var(--spacing-lg);">
|
|
298
|
+
<i class="fas fa-info-circle" style="color: var(--accent);"></i>
|
|
299
|
+
Try clicking any image in the gallery above to see the lightbox in action.
|
|
300
|
+
</p>
|
|
301
|
+
|
|
302
|
+
<div class="code-example"><!-- Lightbox is auto-created by gallery.js -->
|
|
303
|
+
<!-- Manual API access: -->
|
|
304
|
+
<script type="module">
|
|
305
|
+
import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
|
|
306
|
+
|
|
307
|
+
const gallery = initGallery('#my-gallery', {
|
|
308
|
+
enableLightbox: true,
|
|
309
|
+
enableKeyboard: true,
|
|
310
|
+
onLightboxOpen: (image, index) => console.log('Opened:', image),
|
|
311
|
+
onLightboxClose: () => console.log('Closed')
|
|
312
|
+
});
|
|
313
|
+
|
|
314
|
+
// Manual control
|
|
315
|
+
gallery.openLightbox(0); // Open first image
|
|
316
|
+
gallery.closeLightbox(); // Close lightbox
|
|
317
|
+
</script></div>
|
|
318
|
+
</section>
|
|
319
|
+
|
|
320
|
+
<!-- ======================= NSFW CONTENT ======================= -->
|
|
321
|
+
<section class="showcase-section" id="nsfw">
|
|
322
|
+
<h2><i class="fas fa-eye-slash"></i> NSFW Content Blur</h2>
|
|
323
|
+
<p class="showcase-description">
|
|
324
|
+
Content warning system with blur overlay that reveals on click.
|
|
325
|
+
Perfect for galleries with age-restricted content. Automatically
|
|
326
|
+
removes blur when opened in lightbox.
|
|
327
|
+
</p>
|
|
328
|
+
|
|
329
|
+
<h3>Demo (Click to Reveal)</h3>
|
|
330
|
+
<div class="gallery-container gallery-demo-images" style="grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));">
|
|
331
|
+
<div class="gallery-item nsfw-content" data-warning="18+ Click to Reveal">
|
|
332
|
+
<img src="https://placehold.co/400x300/1a1a2e/d94f90?text=Safe+Content" alt="Ocean waves">
|
|
333
|
+
<div class="gallery-caption">
|
|
334
|
+
<div class="title">Hidden Content</div>
|
|
335
|
+
<div class="meta">Click the overlay to reveal</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
<div class="gallery-item nsfw-content" data-warning="Sensitive Content">
|
|
339
|
+
<img src="https://placehold.co/400x300/3d1f2d/d94f90?text=NSFW+Demo" alt="Sunset">
|
|
340
|
+
<div class="gallery-caption">
|
|
341
|
+
<div class="title">Custom Warning Text</div>
|
|
342
|
+
<div class="meta">Uses data-warning attribute</div>
|
|
343
|
+
</div>
|
|
344
|
+
</div>
|
|
345
|
+
<div class="gallery-item">
|
|
346
|
+
<img src="https://placehold.co/400x300/1f2d3d/d94f90?text=Landscape+3" alt="Mountains">
|
|
347
|
+
<div class="gallery-caption">
|
|
348
|
+
<div class="title">Normal Image</div>
|
|
349
|
+
<div class="meta">No NSFW class applied</div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
</div>
|
|
353
|
+
|
|
354
|
+
<div class="code-example"><!-- Add nsfw-content class to blur -->
|
|
355
|
+
<div class="gallery-item nsfw-content" data-warning="18+ Click to View">
|
|
356
|
+
<img src="sensitive-image.jpg" alt="Description">
|
|
357
|
+
</div>
|
|
358
|
+
|
|
359
|
+
<!-- Custom warning text -->
|
|
360
|
+
<div class="gallery-item nsfw-content" data-warning="Sensitive Content">
|
|
361
|
+
<img src="image.jpg" alt="Description">
|
|
362
|
+
</div>
|
|
363
|
+
|
|
364
|
+
<!-- JavaScript API -->
|
|
365
|
+
<script type="module">
|
|
366
|
+
import { initGallery } from '@whykusanagi/corrupted-theme/gallery';
|
|
367
|
+
|
|
368
|
+
const gallery = initGallery('#gallery', {
|
|
369
|
+
enableNsfw: true,
|
|
370
|
+
nsfwWarning: '18+ Click to View',
|
|
371
|
+
onNsfwReveal: (element) => console.log('Revealed:', element)
|
|
372
|
+
});
|
|
373
|
+
</script></div>
|
|
374
|
+
</section>
|
|
375
|
+
|
|
376
|
+
<!-- ======================= SOCIAL LINKS ======================= -->
|
|
377
|
+
<section class="showcase-section" id="social">
|
|
378
|
+
<h2><i class="fas fa-link"></i> Social Links List</h2>
|
|
379
|
+
<p class="showcase-description">
|
|
380
|
+
Link-in-bio style social links layout with profile avatar, name, bio,
|
|
381
|
+
and styled link buttons. Perfect for profile pages, link aggregation,
|
|
382
|
+
and social showcases.
|
|
383
|
+
</p>
|
|
384
|
+
|
|
385
|
+
<h3>Demo</h3>
|
|
386
|
+
<div class="social-demo-bg">
|
|
387
|
+
<div class="social-links-container">
|
|
388
|
+
<img src="assets/celeste-avatar.png"
|
|
389
|
+
alt="Profile" class="profile-avatar">
|
|
390
|
+
<h1 class="profile-name">@whykusanagi</h1>
|
|
391
|
+
<p class="profile-bio">
|
|
392
|
+
Digital artist & developer creating corrupted aesthetics.
|
|
393
|
+
Building tools for the creative community.
|
|
394
|
+
</p>
|
|
395
|
+
<div class="link-list">
|
|
396
|
+
<a href="#" class="link-item twitter">
|
|
397
|
+
<i class="fab fa-twitter"></i> Twitter / X
|
|
398
|
+
</a>
|
|
399
|
+
<a href="#" class="link-item instagram">
|
|
400
|
+
<i class="fab fa-instagram"></i> Instagram
|
|
401
|
+
</a>
|
|
402
|
+
<a href="#" class="link-item youtube">
|
|
403
|
+
<i class="fab fa-youtube"></i> YouTube
|
|
404
|
+
</a>
|
|
405
|
+
<a href="#" class="link-item github">
|
|
406
|
+
<i class="fab fa-github"></i> GitHub
|
|
407
|
+
</a>
|
|
408
|
+
<a href="#" class="link-item discord">
|
|
409
|
+
<i class="fab fa-discord"></i> Discord
|
|
410
|
+
</a>
|
|
411
|
+
<a href="#" class="link-item">
|
|
412
|
+
<i class="fas fa-globe"></i> Website
|
|
413
|
+
</a>
|
|
414
|
+
</div>
|
|
415
|
+
</div>
|
|
416
|
+
</div>
|
|
417
|
+
|
|
418
|
+
<h3>Avatar Sizes</h3>
|
|
419
|
+
<div class="demo-container" style="display: flex; align-items: center; justify-content: center; gap: var(--spacing-xl);">
|
|
420
|
+
<div style="text-align: center;">
|
|
421
|
+
<img src="assets/celeste-avatar.png"
|
|
422
|
+
class="profile-avatar sm" style="margin-bottom: var(--spacing-sm);">
|
|
423
|
+
<p style="color: var(--text-secondary); font-size: 0.85rem;">.profile-avatar.sm</p>
|
|
424
|
+
</div>
|
|
425
|
+
<div style="text-align: center;">
|
|
426
|
+
<img src="assets/celeste-avatar.png"
|
|
427
|
+
class="profile-avatar" style="margin-bottom: var(--spacing-sm);">
|
|
428
|
+
<p style="color: var(--text-secondary); font-size: 0.85rem;">.profile-avatar</p>
|
|
429
|
+
</div>
|
|
430
|
+
<div style="text-align: center;">
|
|
431
|
+
<img src="assets/celeste-avatar.png"
|
|
432
|
+
class="profile-avatar lg" style="margin-bottom: var(--spacing-sm);">
|
|
433
|
+
<p style="color: var(--text-secondary); font-size: 0.85rem;">.profile-avatar.lg</p>
|
|
434
|
+
</div>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
<div class="code-example"><div class="social-links-container">
|
|
438
|
+
<img src="profile.jpg" alt="Profile" class="profile-avatar">
|
|
439
|
+
<h1 class="profile-name">@username</h1>
|
|
440
|
+
<p class="profile-bio">Your bio text here.</p>
|
|
441
|
+
|
|
442
|
+
<div class="link-list">
|
|
443
|
+
<!-- Platform-specific hover colors -->
|
|
444
|
+
<a href="#" class="link-item twitter">
|
|
445
|
+
<i class="fab fa-twitter"></i> Twitter
|
|
446
|
+
</a>
|
|
447
|
+
<a href="#" class="link-item instagram">
|
|
448
|
+
<i class="fab fa-instagram"></i> Instagram
|
|
449
|
+
</a>
|
|
450
|
+
<a href="#" class="link-item youtube">
|
|
451
|
+
<i class="fab fa-youtube"></i> YouTube
|
|
452
|
+
</a>
|
|
453
|
+
<a href="#" class="link-item github">
|
|
454
|
+
<i class="fab fa-github"></i> GitHub
|
|
455
|
+
</a>
|
|
456
|
+
<a href="#" class="link-item discord">
|
|
457
|
+
<i class="fab fa-discord"></i> Discord
|
|
458
|
+
</a>
|
|
459
|
+
<a href="#" class="link-item twitch">
|
|
460
|
+
<i class="fab fa-twitch"></i> Twitch
|
|
461
|
+
</a>
|
|
462
|
+
<!-- Default accent color -->
|
|
463
|
+
<a href="#" class="link-item">
|
|
464
|
+
<i class="fas fa-globe"></i> Website
|
|
465
|
+
</a>
|
|
466
|
+
</div>
|
|
467
|
+
</div></div>
|
|
468
|
+
</section>
|
|
469
|
+
|
|
470
|
+
<!-- ======================= COUNTDOWN WIDGET ======================= -->
|
|
471
|
+
<section class="showcase-section" id="countdown">
|
|
472
|
+
<h2><i class="fas fa-clock"></i> Countdown Widget</h2>
|
|
473
|
+
<p class="showcase-description">
|
|
474
|
+
Sophisticated event countdown widget with configurable shapes,
|
|
475
|
+
character images, overlay effects, and animated popup messages.
|
|
476
|
+
Supports JSON configuration for multiple events.
|
|
477
|
+
</p>
|
|
478
|
+
|
|
479
|
+
<h3>Live Demo</h3>
|
|
480
|
+
<div class="demo-container countdown-demo-container">
|
|
481
|
+
<div id="countdown-widget"></div>
|
|
482
|
+
</div>
|
|
483
|
+
|
|
484
|
+
<h3>Shape Variants</h3>
|
|
485
|
+
<div class="demo-container">
|
|
486
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
487
|
+
Available shape containers (all maintain 375px base size):
|
|
488
|
+
</p>
|
|
489
|
+
<div style="display: flex; flex-wrap: wrap; gap: var(--spacing-md); justify-content: center;">
|
|
490
|
+
<span class="badge">diamond</span>
|
|
491
|
+
<span class="badge">circle</span>
|
|
492
|
+
<span class="badge">heart</span>
|
|
493
|
+
<span class="badge">star</span>
|
|
494
|
+
<span class="badge">hexagon</span>
|
|
495
|
+
<span class="badge">octagon</span>
|
|
496
|
+
</div>
|
|
497
|
+
</div>
|
|
498
|
+
|
|
499
|
+
<h3>Configuration Options</h3>
|
|
500
|
+
<div class="demo-container">
|
|
501
|
+
<table class="table" style="margin-bottom: 0;">
|
|
502
|
+
<thead>
|
|
503
|
+
<tr>
|
|
504
|
+
<th>Property</th>
|
|
505
|
+
<th>Type</th>
|
|
506
|
+
<th>Description</th>
|
|
507
|
+
</tr>
|
|
508
|
+
</thead>
|
|
509
|
+
<tbody>
|
|
510
|
+
<tr>
|
|
511
|
+
<td><code>title</code></td>
|
|
512
|
+
<td>string</td>
|
|
513
|
+
<td>Title displayed above countdown</td>
|
|
514
|
+
</tr>
|
|
515
|
+
<tr>
|
|
516
|
+
<td><code>eventDate</code></td>
|
|
517
|
+
<td>ISO 8601</td>
|
|
518
|
+
<td>Target date/time for countdown</td>
|
|
519
|
+
</tr>
|
|
520
|
+
<tr>
|
|
521
|
+
<td><code>character.image</code></td>
|
|
522
|
+
<td>string</td>
|
|
523
|
+
<td>Character image URL</td>
|
|
524
|
+
</tr>
|
|
525
|
+
<tr>
|
|
526
|
+
<td><code>character.background.type</code></td>
|
|
527
|
+
<td>string</td>
|
|
528
|
+
<td>Shape type (diamond, circle, etc.)</td>
|
|
529
|
+
</tr>
|
|
530
|
+
<tr>
|
|
531
|
+
<td><code>character.overlay</code></td>
|
|
532
|
+
<td>object</td>
|
|
533
|
+
<td>Overlay image with animation</td>
|
|
534
|
+
</tr>
|
|
535
|
+
<tr>
|
|
536
|
+
<td><code>popup</code></td>
|
|
537
|
+
<td>object</td>
|
|
538
|
+
<td>Popup message configuration</td>
|
|
539
|
+
</tr>
|
|
540
|
+
<tr>
|
|
541
|
+
<td><code>completedMessage</code></td>
|
|
542
|
+
<td>string</td>
|
|
543
|
+
<td>Message shown when countdown ends</td>
|
|
544
|
+
</tr>
|
|
545
|
+
</tbody>
|
|
546
|
+
</table>
|
|
547
|
+
</div>
|
|
548
|
+
|
|
549
|
+
<div class="code-example"><!-- HTML -->
|
|
550
|
+
<div id="countdown-widget"></div>
|
|
551
|
+
|
|
552
|
+
<!-- JavaScript with inline config -->
|
|
553
|
+
<script type="module">
|
|
554
|
+
import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
|
|
555
|
+
|
|
556
|
+
initCountdown({
|
|
557
|
+
config: {
|
|
558
|
+
title: 'Product Launch',
|
|
559
|
+
eventDate: '2025-04-01T00:00:00-07:00',
|
|
560
|
+
completedMessage: 'Now Available!',
|
|
561
|
+
character: {
|
|
562
|
+
image: 'character.png',
|
|
563
|
+
rotation: 0,
|
|
564
|
+
background: {
|
|
565
|
+
type: 'diamond',
|
|
566
|
+
color: 'radial-gradient(circle, rgba(54, 83, 161, 0.6), rgba(217, 79, 144, 0.6))',
|
|
567
|
+
borderColor: '#4c2967'
|
|
568
|
+
},
|
|
569
|
+
overlay: {
|
|
570
|
+
image: 'overlay.png',
|
|
571
|
+
position: 'behind',
|
|
572
|
+
animation: 'float'
|
|
573
|
+
}
|
|
574
|
+
},
|
|
575
|
+
popup: {
|
|
576
|
+
message: '<strong>Don\'t miss it!</strong><br>Pre-order now!',
|
|
577
|
+
frequency: 15000,
|
|
578
|
+
duration: 5000
|
|
579
|
+
}
|
|
580
|
+
}
|
|
581
|
+
});
|
|
582
|
+
</script>
|
|
583
|
+
|
|
584
|
+
<!-- Or load from JSON via URL parameter -->
|
|
585
|
+
<!-- Access: page.html?event=kirara loads /data/countdown/kirara.json -->
|
|
586
|
+
<script type="module">
|
|
587
|
+
import { initCountdown } from '@whykusanagi/corrupted-theme/countdown';
|
|
588
|
+
initCountdown(); // Reads ?event= from URL
|
|
589
|
+
</script></div>
|
|
590
|
+
|
|
591
|
+
<h3>JSON Configuration File</h3>
|
|
592
|
+
<div class="code-example">{
|
|
593
|
+
"title": "Manga Launch Countdown",
|
|
594
|
+
"eventDate": "2025-04-01T04:00:00-07:00",
|
|
595
|
+
"basicMessage": "Fall of Kirara manga launch",
|
|
596
|
+
"completedMessage": "Now Available! Get your copy today!",
|
|
597
|
+
"style": "compact",
|
|
598
|
+
"character": {
|
|
599
|
+
"image": "Fall_of_Kirara.png",
|
|
600
|
+
"rotation": 0,
|
|
601
|
+
"background": {
|
|
602
|
+
"type": "diamond",
|
|
603
|
+
"color": null,
|
|
604
|
+
"borderColor": "#4c2967",
|
|
605
|
+
"pattern": false
|
|
606
|
+
},
|
|
607
|
+
"overlay": {
|
|
608
|
+
"image": "Tentacle_Foil.png",
|
|
609
|
+
"position": "behind",
|
|
610
|
+
"animation": "float",
|
|
611
|
+
"rotation": null
|
|
612
|
+
}
|
|
613
|
+
},
|
|
614
|
+
"popup": {
|
|
615
|
+
"message": "📚 Pre-order now! <a href='#'>Shop</a>",
|
|
616
|
+
"frequency": 10000,
|
|
617
|
+
"duration": 5000,
|
|
618
|
+
"colors": {
|
|
619
|
+
"bg": "#3653a1",
|
|
620
|
+
"border": "#d94f90",
|
|
621
|
+
"text": "#ffffff"
|
|
622
|
+
}
|
|
623
|
+
},
|
|
624
|
+
"colors": {
|
|
625
|
+
"primary": null,
|
|
626
|
+
"accent": null,
|
|
627
|
+
"text": null
|
|
628
|
+
}
|
|
629
|
+
}</div>
|
|
630
|
+
</section>
|
|
631
|
+
|
|
632
|
+
<!-- Footer -->
|
|
633
|
+
<footer style="text-align: center; padding: var(--spacing-2xl) var(--spacing-lg); margin-top: var(--spacing-xl); border-top: 1px solid var(--border); color: var(--text-secondary);">
|
|
634
|
+
<p><strong>Corrupted Theme Extensions</strong> • Production-tested components from whykusanagi.xyz</p>
|
|
635
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
636
|
+
<a href="../README.md" class="link">Documentation</a> •
|
|
637
|
+
<a href="showcase-complete.html" class="link">Full Component Library</a> •
|
|
638
|
+
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
639
|
+
</p>
|
|
640
|
+
</footer>
|
|
641
|
+
</div>
|
|
642
|
+
|
|
643
|
+
<!-- Gallery & Lightbox Script -->
|
|
644
|
+
<script type="module">
|
|
645
|
+
import { initGallery } from '../src/lib/gallery.js';
|
|
646
|
+
|
|
647
|
+
// Initialize main gallery with all features
|
|
648
|
+
const gallery = initGallery('#demo-gallery', {
|
|
649
|
+
filterBarSelector: '#demo-filter-bar .filter-btn',
|
|
650
|
+
enableLightbox: true,
|
|
651
|
+
enableNsfw: true,
|
|
652
|
+
enableKeyboard: true,
|
|
653
|
+
filterAnimation: true,
|
|
654
|
+
onFilter: (filter) => console.log('Filtered to:', filter),
|
|
655
|
+
onLightboxOpen: (image, index) => console.log('Lightbox opened:', index),
|
|
656
|
+
onNsfwReveal: (element) => console.log('NSFW revealed')
|
|
657
|
+
});
|
|
658
|
+
|
|
659
|
+
// Also init NSFW demo gallery (no filtering)
|
|
660
|
+
initGallery('.showcase-section:nth-of-type(4) .gallery-container', {
|
|
661
|
+
enableLightbox: true,
|
|
662
|
+
enableNsfw: true
|
|
663
|
+
});
|
|
664
|
+
</script>
|
|
665
|
+
|
|
666
|
+
<!-- Countdown Widget Script -->
|
|
667
|
+
<script type="module">
|
|
668
|
+
import { initCountdown } from '../src/lib/countdown-widget.js';
|
|
669
|
+
|
|
670
|
+
// Demo countdown config (next year's date)
|
|
671
|
+
const nextYear = new Date();
|
|
672
|
+
nextYear.setFullYear(nextYear.getFullYear() + 1);
|
|
673
|
+
nextYear.setMonth(0, 1); // January 1st
|
|
674
|
+
nextYear.setHours(0, 0, 0, 0);
|
|
675
|
+
|
|
676
|
+
initCountdown({
|
|
677
|
+
config: {
|
|
678
|
+
title: 'Next Year Countdown',
|
|
679
|
+
eventDate: nextYear.toISOString(),
|
|
680
|
+
completedMessage: 'Happy New Year!',
|
|
681
|
+
character: {
|
|
682
|
+
image: 'assets/celeste-avatar.png',
|
|
683
|
+
rotation: 0,
|
|
684
|
+
background: {
|
|
685
|
+
type: 'diamond',
|
|
686
|
+
color: 'radial-gradient(circle, rgba(54, 83, 161, 0.7) 10%, rgba(217, 79, 144, 0.7) 60%)',
|
|
687
|
+
borderColor: '#4c2967'
|
|
688
|
+
}
|
|
689
|
+
},
|
|
690
|
+
popup: {
|
|
691
|
+
message: '🎉 <strong>Demo Countdown Widget</strong><br>Production-ready for your events!',
|
|
692
|
+
frequency: 12000,
|
|
693
|
+
duration: 4000
|
|
694
|
+
}
|
|
695
|
+
}
|
|
696
|
+
});
|
|
697
|
+
</script>
|
|
698
|
+
|
|
699
|
+
<!-- Smooth scroll -->
|
|
700
|
+
<script>
|
|
701
|
+
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
|
702
|
+
anchor.addEventListener('click', function(e) {
|
|
703
|
+
e.preventDefault();
|
|
704
|
+
const target = document.querySelector(this.getAttribute('href'));
|
|
705
|
+
if (target) {
|
|
706
|
+
target.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
707
|
+
// Update active nav
|
|
708
|
+
document.querySelectorAll('.navbar-links a').forEach(link => link.classList.remove('active'));
|
|
709
|
+
this.classList.add('active');
|
|
710
|
+
}
|
|
711
|
+
});
|
|
712
|
+
});
|
|
713
|
+
</script>
|
|
714
|
+
</body>
|
|
715
|
+
</html>
|
|
716
|
+
|