@whykusanagi/corrupted-theme 0.1.1 → 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 +120 -0
- package/README.md +91 -7
- 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/extensions.css +933 -0
- package/src/css/theme.css +6 -74
- package/src/css/typography.css +5 -0
- package/src/lib/countdown-widget.js +609 -0
- package/src/lib/gallery.js +481 -0
package/examples/index.html
CHANGED
|
@@ -3,518 +3,741 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Corrupted Theme -
|
|
6
|
+
<title>Corrupted Theme - Design System</title>
|
|
7
|
+
<meta name="description" content="A dark, glassmorphic design system with pink/purple accents. Production-ready components for modern web applications.">
|
|
7
8
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
|
|
8
9
|
<link rel="stylesheet" href="../src/css/theme.css">
|
|
9
10
|
<style>
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
padding: var(--spacing-lg);
|
|
11
|
+
/* ========== LANDING PAGE STYLES ========== */
|
|
12
|
+
:root {
|
|
13
|
+
--landing-max-width: 1400px;
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
-
|
|
17
|
-
|
|
16
|
+
* {
|
|
17
|
+
box-sizing: border-box;
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
margin-bottom: var(--spacing-lg);
|
|
23
|
-
padding-bottom: var(--spacing-md);
|
|
24
|
-
border-bottom: 2px solid var(--border);
|
|
20
|
+
body {
|
|
21
|
+
min-height: 100vh;
|
|
25
22
|
}
|
|
26
23
|
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
24
|
+
/* Hero Section */
|
|
25
|
+
.hero {
|
|
26
|
+
position: relative;
|
|
27
|
+
padding: 8rem var(--spacing-xl) 6rem;
|
|
28
|
+
text-align: center;
|
|
29
|
+
background:
|
|
30
|
+
radial-gradient(ellipse at 20% 80%, rgba(217, 79, 144, 0.15) 0%, transparent 50%),
|
|
31
|
+
radial-gradient(ellipse at 80% 20%, rgba(138, 43, 226, 0.1) 0%, transparent 50%),
|
|
32
|
+
var(--bg);
|
|
33
|
+
overflow: hidden;
|
|
32
34
|
}
|
|
33
35
|
|
|
34
|
-
.
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
font-size: 0.875rem;
|
|
42
|
-
overflow-x: auto;
|
|
43
|
-
color: var(--text-secondary);
|
|
36
|
+
.hero::before {
|
|
37
|
+
content: '';
|
|
38
|
+
position: absolute;
|
|
39
|
+
inset: 0;
|
|
40
|
+
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
|
|
41
|
+
opacity: 0.03;
|
|
42
|
+
pointer-events: none;
|
|
44
43
|
}
|
|
45
44
|
|
|
46
|
-
.
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
45
|
+
.hero-content {
|
|
46
|
+
position: relative;
|
|
47
|
+
max-width: 900px;
|
|
48
|
+
margin: 0 auto;
|
|
49
|
+
z-index: 1;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
.hero-badge {
|
|
53
|
+
display: inline-flex;
|
|
54
54
|
align-items: center;
|
|
55
|
-
|
|
55
|
+
gap: var(--spacing-sm);
|
|
56
|
+
padding: var(--spacing-xs) var(--spacing-md);
|
|
57
|
+
background: rgba(217, 79, 144, 0.15);
|
|
58
|
+
border: 1px solid rgba(217, 79, 144, 0.3);
|
|
59
|
+
border-radius: var(--radius-full);
|
|
60
|
+
font-size: 0.85rem;
|
|
61
|
+
color: var(--accent-light);
|
|
62
|
+
margin-bottom: var(--spacing-lg);
|
|
56
63
|
}
|
|
57
64
|
|
|
58
|
-
.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
padding: var(--spacing-md);
|
|
65
|
+
.hero h1 {
|
|
66
|
+
font-size: clamp(2.5rem, 6vw, 4.5rem);
|
|
67
|
+
font-weight: 800;
|
|
68
|
+
line-height: 1.1;
|
|
63
69
|
margin-bottom: var(--spacing-lg);
|
|
70
|
+
background: linear-gradient(135deg, var(--text) 0%, var(--accent-light) 50%, var(--accent) 100%);
|
|
71
|
+
-webkit-background-clip: text;
|
|
72
|
+
-webkit-text-fill-color: transparent;
|
|
73
|
+
background-clip: text;
|
|
64
74
|
}
|
|
65
75
|
|
|
66
|
-
.
|
|
76
|
+
.hero-description {
|
|
77
|
+
font-size: 1.25rem;
|
|
78
|
+
color: var(--text-secondary);
|
|
79
|
+
max-width: 700px;
|
|
80
|
+
margin: 0 auto var(--spacing-xl);
|
|
81
|
+
line-height: 1.7;
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
.hero-actions {
|
|
67
85
|
display: flex;
|
|
68
|
-
gap: var(--spacing-
|
|
86
|
+
gap: var(--spacing-md);
|
|
87
|
+
justify-content: center;
|
|
69
88
|
flex-wrap: wrap;
|
|
70
89
|
}
|
|
71
90
|
|
|
72
|
-
.
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
border-radius: var(--radius-md);
|
|
77
|
-
transition: all var(--transition-normal);
|
|
91
|
+
.hero-actions .btn {
|
|
92
|
+
padding: var(--spacing-md) var(--spacing-xl);
|
|
93
|
+
font-size: 1rem;
|
|
94
|
+
font-weight: 600;
|
|
78
95
|
}
|
|
79
96
|
|
|
80
|
-
.
|
|
81
|
-
|
|
97
|
+
.hero-actions .btn-secondary {
|
|
98
|
+
background: transparent;
|
|
99
|
+
border: 2px solid var(--border);
|
|
82
100
|
color: var(--text);
|
|
83
|
-
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.hero-actions .btn-secondary:hover {
|
|
84
104
|
border-color: var(--accent);
|
|
105
|
+
background: rgba(217, 79, 144, 0.1);
|
|
85
106
|
}
|
|
86
107
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
108
|
+
/* Main Content */
|
|
109
|
+
.main-content {
|
|
110
|
+
max-width: var(--landing-max-width);
|
|
111
|
+
margin: 0 auto;
|
|
112
|
+
padding: var(--spacing-2xl) var(--spacing-xl);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
/* Section Headers */
|
|
116
|
+
.section-header {
|
|
92
117
|
text-align: center;
|
|
93
118
|
margin-bottom: var(--spacing-2xl);
|
|
94
119
|
}
|
|
95
120
|
|
|
96
|
-
.
|
|
97
|
-
font-size:
|
|
98
|
-
|
|
99
|
-
|
|
121
|
+
.section-header h2 {
|
|
122
|
+
font-size: 2rem;
|
|
123
|
+
font-weight: 700;
|
|
124
|
+
margin-bottom: var(--spacing-sm);
|
|
125
|
+
color: var(--text);
|
|
100
126
|
}
|
|
101
127
|
|
|
102
|
-
.
|
|
128
|
+
.section-header p {
|
|
103
129
|
font-size: 1.1rem;
|
|
104
|
-
|
|
130
|
+
color: var(--text-secondary);
|
|
131
|
+
max-width: 600px;
|
|
132
|
+
margin: 0 auto;
|
|
105
133
|
}
|
|
106
134
|
|
|
107
|
-
|
|
108
|
-
|
|
135
|
+
/* Category Grid */
|
|
136
|
+
.category-grid {
|
|
137
|
+
display: grid;
|
|
138
|
+
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
|
139
|
+
gap: var(--spacing-lg);
|
|
140
|
+
margin-bottom: var(--spacing-3xl);
|
|
109
141
|
}
|
|
110
142
|
|
|
111
|
-
.
|
|
112
|
-
|
|
113
|
-
|
|
143
|
+
.category-card {
|
|
144
|
+
position: relative;
|
|
145
|
+
padding: var(--spacing-xl);
|
|
146
|
+
background: var(--glass);
|
|
147
|
+
border: 1px solid var(--border);
|
|
148
|
+
border-radius: var(--radius-xl);
|
|
149
|
+
text-decoration: none;
|
|
114
150
|
color: var(--text);
|
|
115
|
-
|
|
151
|
+
transition: all var(--transition-normal);
|
|
152
|
+
overflow: hidden;
|
|
116
153
|
}
|
|
117
154
|
|
|
118
|
-
.
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
155
|
+
.category-card::before {
|
|
156
|
+
content: '';
|
|
157
|
+
position: absolute;
|
|
158
|
+
top: 0;
|
|
159
|
+
left: 0;
|
|
160
|
+
right: 0;
|
|
161
|
+
height: 4px;
|
|
162
|
+
background: var(--gradient-accent);
|
|
163
|
+
opacity: 0;
|
|
164
|
+
transition: opacity var(--transition-normal);
|
|
123
165
|
}
|
|
124
166
|
|
|
125
|
-
.
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
167
|
+
.category-card:hover {
|
|
168
|
+
border-color: var(--accent);
|
|
169
|
+
transform: translateY(-4px);
|
|
170
|
+
box-shadow: var(--shadow-accent-lg);
|
|
129
171
|
}
|
|
130
172
|
|
|
131
|
-
.
|
|
132
|
-
|
|
133
|
-
border: 1px solid var(--border);
|
|
134
|
-
padding: var(--spacing-lg);
|
|
135
|
-
border-radius: var(--radius-lg);
|
|
136
|
-
text-align: center;
|
|
173
|
+
.category-card:hover::before {
|
|
174
|
+
opacity: 1;
|
|
137
175
|
}
|
|
138
176
|
|
|
139
|
-
.
|
|
177
|
+
.category-icon {
|
|
178
|
+
width: 56px;
|
|
179
|
+
height: 56px;
|
|
140
180
|
display: flex;
|
|
141
|
-
|
|
142
|
-
flex-wrap: wrap;
|
|
181
|
+
align-items: center;
|
|
143
182
|
justify-content: center;
|
|
183
|
+
background: rgba(217, 79, 144, 0.1);
|
|
184
|
+
border-radius: var(--radius-lg);
|
|
185
|
+
font-size: 1.5rem;
|
|
186
|
+
color: var(--accent);
|
|
187
|
+
margin-bottom: var(--spacing-md);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.category-card h3 {
|
|
191
|
+
font-size: 1.25rem;
|
|
192
|
+
font-weight: 600;
|
|
193
|
+
margin-bottom: var(--spacing-sm);
|
|
194
|
+
display: flex;
|
|
144
195
|
align-items: center;
|
|
196
|
+
gap: var(--spacing-sm);
|
|
145
197
|
}
|
|
146
198
|
|
|
147
|
-
.
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
199
|
+
.category-card h3 .badge {
|
|
200
|
+
font-size: 0.7rem;
|
|
201
|
+
padding: 2px 8px;
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
.category-card p {
|
|
205
|
+
font-size: 0.95rem;
|
|
206
|
+
color: var(--text-secondary);
|
|
207
|
+
line-height: 1.6;
|
|
208
|
+
margin-bottom: var(--spacing-md);
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.category-card .card-footer {
|
|
152
212
|
display: flex;
|
|
153
213
|
align-items: center;
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
font-
|
|
158
|
-
text-align: center;
|
|
214
|
+
gap: var(--spacing-sm);
|
|
215
|
+
font-size: 0.9rem;
|
|
216
|
+
color: var(--accent);
|
|
217
|
+
font-weight: 500;
|
|
159
218
|
}
|
|
160
219
|
|
|
161
|
-
.
|
|
220
|
+
.category-card .card-footer i {
|
|
221
|
+
transition: transform var(--transition-fast);
|
|
222
|
+
}
|
|
223
|
+
|
|
224
|
+
.category-card:hover .card-footer i {
|
|
225
|
+
transform: translateX(4px);
|
|
226
|
+
}
|
|
227
|
+
|
|
228
|
+
/* Quick Links Section */
|
|
229
|
+
.quick-links {
|
|
230
|
+
display: grid;
|
|
231
|
+
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
232
|
+
gap: var(--spacing-md);
|
|
233
|
+
margin-bottom: var(--spacing-3xl);
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.quick-link {
|
|
162
237
|
display: flex;
|
|
238
|
+
align-items: center;
|
|
163
239
|
gap: var(--spacing-md);
|
|
164
|
-
|
|
165
|
-
|
|
240
|
+
padding: var(--spacing-md) var(--spacing-lg);
|
|
241
|
+
background: var(--glass-darker);
|
|
242
|
+
border: 1px solid var(--border);
|
|
243
|
+
border-radius: var(--radius-lg);
|
|
244
|
+
color: var(--text);
|
|
245
|
+
text-decoration: none;
|
|
246
|
+
transition: all var(--transition-fast);
|
|
166
247
|
}
|
|
167
248
|
|
|
168
|
-
.
|
|
169
|
-
|
|
170
|
-
|
|
249
|
+
.quick-link:hover {
|
|
250
|
+
background: var(--glass);
|
|
251
|
+
border-color: var(--accent);
|
|
252
|
+
color: var(--accent);
|
|
171
253
|
}
|
|
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
254
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
<p style="font-size: 0.95rem; opacity: 0.9;">
|
|
196
|
-
Complete component library with animations, accessibility, and full customization
|
|
197
|
-
</p>
|
|
198
|
-
</section>
|
|
255
|
+
.quick-link i {
|
|
256
|
+
font-size: 1.2rem;
|
|
257
|
+
width: 24px;
|
|
258
|
+
text-align: center;
|
|
259
|
+
}
|
|
199
260
|
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
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>
|
|
261
|
+
/* Features Grid */
|
|
262
|
+
.features-grid {
|
|
263
|
+
display: grid;
|
|
264
|
+
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|
265
|
+
gap: var(--spacing-lg);
|
|
266
|
+
margin-bottom: var(--spacing-3xl);
|
|
267
|
+
}
|
|
212
268
|
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
<button class="btn" disabled>Disabled</button>
|
|
220
|
-
</div>
|
|
221
|
-
</section>
|
|
269
|
+
.feature-item {
|
|
270
|
+
padding: var(--spacing-lg);
|
|
271
|
+
background: var(--glass-darker);
|
|
272
|
+
border: 1px solid var(--border);
|
|
273
|
+
border-radius: var(--radius-lg);
|
|
274
|
+
}
|
|
222
275
|
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
276
|
+
.feature-item i {
|
|
277
|
+
font-size: 1.5rem;
|
|
278
|
+
color: var(--accent);
|
|
279
|
+
margin-bottom: var(--spacing-md);
|
|
280
|
+
}
|
|
226
281
|
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
</div>
|
|
282
|
+
.feature-item h4 {
|
|
283
|
+
font-size: 1.1rem;
|
|
284
|
+
margin-bottom: var(--spacing-sm);
|
|
285
|
+
color: var(--text);
|
|
286
|
+
}
|
|
233
287
|
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
288
|
+
.feature-item p {
|
|
289
|
+
font-size: 0.9rem;
|
|
290
|
+
color: var(--text-secondary);
|
|
291
|
+
line-height: 1.6;
|
|
292
|
+
}
|
|
239
293
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
294
|
+
/* Code Install Block */
|
|
295
|
+
.install-block {
|
|
296
|
+
background: var(--glass-darker);
|
|
297
|
+
border: 1px solid var(--border);
|
|
298
|
+
border-radius: var(--radius-lg);
|
|
299
|
+
padding: var(--spacing-lg);
|
|
300
|
+
margin-bottom: var(--spacing-3xl);
|
|
301
|
+
}
|
|
245
302
|
|
|
246
|
-
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
</div>
|
|
303
|
+
.install-block h3 {
|
|
304
|
+
font-size: 1.1rem;
|
|
305
|
+
margin-bottom: var(--spacing-md);
|
|
306
|
+
color: var(--text);
|
|
307
|
+
}
|
|
252
308
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
309
|
+
.install-code {
|
|
310
|
+
display: flex;
|
|
311
|
+
align-items: center;
|
|
312
|
+
gap: var(--spacing-md);
|
|
313
|
+
background: rgba(0, 0, 0, 0.3);
|
|
314
|
+
border: 1px solid var(--border);
|
|
315
|
+
border-radius: var(--radius-md);
|
|
316
|
+
padding: var(--spacing-md) var(--spacing-lg);
|
|
317
|
+
font-family: 'SF Mono', 'Fira Code', monospace;
|
|
318
|
+
font-size: 0.95rem;
|
|
319
|
+
}
|
|
258
320
|
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
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>
|
|
321
|
+
.install-code code {
|
|
322
|
+
flex: 1;
|
|
323
|
+
color: var(--accent-light);
|
|
324
|
+
}
|
|
271
325
|
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
326
|
+
.install-code button {
|
|
327
|
+
background: transparent;
|
|
328
|
+
border: none;
|
|
329
|
+
color: var(--text-secondary);
|
|
330
|
+
cursor: pointer;
|
|
331
|
+
padding: var(--spacing-sm);
|
|
332
|
+
transition: color var(--transition-fast);
|
|
333
|
+
}
|
|
280
334
|
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
335
|
+
.install-code button:hover {
|
|
336
|
+
color: var(--accent);
|
|
337
|
+
}
|
|
284
338
|
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
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>
|
|
339
|
+
/* Footer */
|
|
340
|
+
.landing-footer {
|
|
341
|
+
border-top: 1px solid var(--border);
|
|
342
|
+
padding: var(--spacing-2xl) var(--spacing-xl);
|
|
343
|
+
text-align: center;
|
|
344
|
+
}
|
|
299
345
|
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
<div class="alert alert-error">
|
|
305
|
-
Error message here
|
|
306
|
-
</div>
|
|
307
|
-
</div>
|
|
308
|
-
</section>
|
|
346
|
+
.footer-content {
|
|
347
|
+
max-width: var(--landing-max-width);
|
|
348
|
+
margin: 0 auto;
|
|
349
|
+
}
|
|
309
350
|
|
|
310
|
-
|
|
311
|
-
|
|
312
|
-
|
|
351
|
+
.footer-links {
|
|
352
|
+
display: flex;
|
|
353
|
+
justify-content: center;
|
|
354
|
+
gap: var(--spacing-xl);
|
|
355
|
+
flex-wrap: wrap;
|
|
356
|
+
margin-bottom: var(--spacing-lg);
|
|
357
|
+
}
|
|
313
358
|
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
|
|
359
|
+
.footer-links a {
|
|
360
|
+
color: var(--text-secondary);
|
|
361
|
+
text-decoration: none;
|
|
362
|
+
transition: color var(--transition-fast);
|
|
363
|
+
}
|
|
317
364
|
|
|
318
|
-
|
|
319
|
-
|
|
365
|
+
.footer-links a:hover {
|
|
366
|
+
color: var(--accent);
|
|
367
|
+
}
|
|
320
368
|
|
|
321
|
-
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
<option>Bug Report</option>
|
|
326
|
-
<option>Feedback</option>
|
|
327
|
-
</select>
|
|
369
|
+
.footer-meta {
|
|
370
|
+
font-size: 0.9rem;
|
|
371
|
+
color: var(--text-muted);
|
|
372
|
+
}
|
|
328
373
|
|
|
329
|
-
|
|
330
|
-
|
|
374
|
+
.footer-meta a {
|
|
375
|
+
color: var(--accent);
|
|
376
|
+
text-decoration: none;
|
|
377
|
+
}
|
|
331
378
|
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
379
|
+
/* Stats Bar */
|
|
380
|
+
.stats-bar {
|
|
381
|
+
display: flex;
|
|
382
|
+
justify-content: center;
|
|
383
|
+
gap: var(--spacing-2xl);
|
|
384
|
+
flex-wrap: wrap;
|
|
385
|
+
padding: var(--spacing-xl) 0;
|
|
386
|
+
margin-bottom: var(--spacing-2xl);
|
|
387
|
+
border-bottom: 1px solid var(--border);
|
|
388
|
+
}
|
|
336
389
|
|
|
337
|
-
|
|
338
|
-
|
|
390
|
+
.stat-item {
|
|
391
|
+
text-align: center;
|
|
392
|
+
}
|
|
339
393
|
|
|
340
|
-
|
|
341
|
-
|
|
342
|
-
|
|
394
|
+
.stat-value {
|
|
395
|
+
font-size: 2rem;
|
|
396
|
+
font-weight: 700;
|
|
397
|
+
color: var(--accent);
|
|
398
|
+
display: block;
|
|
399
|
+
}
|
|
343
400
|
|
|
344
|
-
|
|
345
|
-
|
|
401
|
+
.stat-label {
|
|
402
|
+
font-size: 0.9rem;
|
|
403
|
+
color: var(--text-secondary);
|
|
404
|
+
}
|
|
346
405
|
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
</section>
|
|
406
|
+
/* Responsive */
|
|
407
|
+
@media (max-width: 768px) {
|
|
408
|
+
.hero {
|
|
409
|
+
padding: 6rem var(--spacing-lg) 4rem;
|
|
410
|
+
}
|
|
353
411
|
|
|
354
|
-
|
|
355
|
-
|
|
356
|
-
|
|
412
|
+
.hero h1 {
|
|
413
|
+
font-size: 2.5rem;
|
|
414
|
+
}
|
|
357
415
|
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
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>
|
|
416
|
+
.hero-description {
|
|
417
|
+
font-size: 1.1rem;
|
|
418
|
+
}
|
|
373
419
|
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
<div class="grid-item">Item 2</div>
|
|
378
|
-
<div class="grid-item">Item 3</div>
|
|
379
|
-
</div>
|
|
380
|
-
</div>
|
|
381
|
-
</section>
|
|
420
|
+
.category-grid {
|
|
421
|
+
grid-template-columns: 1fr;
|
|
422
|
+
}
|
|
382
423
|
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
424
|
+
.stats-bar {
|
|
425
|
+
gap: var(--spacing-lg);
|
|
426
|
+
}
|
|
427
|
+
}
|
|
428
|
+
</style>
|
|
429
|
+
</head>
|
|
430
|
+
<body>
|
|
431
|
+
<!-- Global Navigation -->
|
|
432
|
+
<nav class="navbar">
|
|
433
|
+
<div class="navbar-content">
|
|
434
|
+
<a href="index.html" class="navbar-logo">
|
|
435
|
+
<i class="fas fa-palette"></i> Corrupted Theme
|
|
436
|
+
</a>
|
|
437
|
+
<ul class="navbar-links">
|
|
438
|
+
<li><a href="index.html" class="active"><i class="fas fa-home"></i> Home</a></li>
|
|
439
|
+
<li class="has-submenu">
|
|
440
|
+
<a href="showcase-complete.html">
|
|
441
|
+
<i class="fas fa-cube"></i> Components
|
|
442
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
443
|
+
</a>
|
|
444
|
+
<div class="submenu">
|
|
445
|
+
<a href="showcase-complete.html"><i class="fas fa-layer-group"></i> All Components</a>
|
|
446
|
+
<a href="showcase-complete.html#glass"><i class="fas fa-square"></i> Glass</a>
|
|
447
|
+
<a href="showcase-complete.html#components"><i class="fas fa-shapes"></i> Standard</a>
|
|
448
|
+
<a href="showcase-complete.html#navigation"><i class="fas fa-bars"></i> Navigation</a>
|
|
449
|
+
<a href="showcase-complete.html#api-docs"><i class="fas fa-code"></i> API Docs</a>
|
|
450
|
+
</div>
|
|
451
|
+
</li>
|
|
452
|
+
<li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
|
|
453
|
+
<li class="has-submenu">
|
|
454
|
+
<a href="#">
|
|
455
|
+
<i class="fas fa-flask"></i> Examples
|
|
456
|
+
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
|
|
457
|
+
</a>
|
|
458
|
+
<div class="submenu">
|
|
459
|
+
<a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
|
|
460
|
+
<a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
|
|
461
|
+
<a href="card.html"><i class="fas fa-square"></i> Cards</a>
|
|
462
|
+
<a href="form.html"><i class="fas fa-edit"></i> Forms</a>
|
|
463
|
+
<a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
|
|
464
|
+
</div>
|
|
465
|
+
</li>
|
|
466
|
+
<li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
|
|
467
|
+
</ul>
|
|
468
|
+
</div>
|
|
469
|
+
</nav>
|
|
386
470
|
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
<
|
|
471
|
+
<!-- Hero Section -->
|
|
472
|
+
<section class="hero">
|
|
473
|
+
<div class="hero-content">
|
|
474
|
+
<div class="hero-badge">
|
|
475
|
+
<i class="fas fa-sparkles"></i>
|
|
476
|
+
<span>v0.1.2 — Production Ready</span>
|
|
477
|
+
</div>
|
|
478
|
+
<h1>Corrupted Theme</h1>
|
|
479
|
+
<p class="hero-description">
|
|
480
|
+
A dark, glassmorphic design system with pink/purple accents.
|
|
481
|
+
Production-tested components for building modern, visually striking web applications.
|
|
482
|
+
</p>
|
|
483
|
+
<div class="hero-actions">
|
|
484
|
+
<a href="showcase-complete.html" class="btn">
|
|
485
|
+
<i class="fas fa-eye"></i> View Components
|
|
486
|
+
</a>
|
|
487
|
+
<a href="https://github.com/whykusanagi/corrupted-theme" class="btn btn-secondary" target="_blank">
|
|
488
|
+
<i class="fab fa-github"></i> GitHub
|
|
489
|
+
</a>
|
|
490
|
+
</div>
|
|
491
|
+
</div>
|
|
492
|
+
</section>
|
|
493
|
+
|
|
494
|
+
<!-- Main Content -->
|
|
495
|
+
<main class="main-content">
|
|
496
|
+
<!-- Stats Bar -->
|
|
497
|
+
<div class="stats-bar">
|
|
498
|
+
<div class="stat-item">
|
|
499
|
+
<span class="stat-value">50+</span>
|
|
500
|
+
<span class="stat-label">Components</span>
|
|
392
501
|
</div>
|
|
502
|
+
<div class="stat-item">
|
|
503
|
+
<span class="stat-value">100+</span>
|
|
504
|
+
<span class="stat-label">CSS Variables</span>
|
|
505
|
+
</div>
|
|
506
|
+
<div class="stat-item">
|
|
507
|
+
<span class="stat-value">5</span>
|
|
508
|
+
<span class="stat-label">Extension Modules</span>
|
|
509
|
+
</div>
|
|
510
|
+
<div class="stat-item">
|
|
511
|
+
<span class="stat-value">A11y</span>
|
|
512
|
+
<span class="stat-label">WCAG AA</span>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
393
515
|
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
<
|
|
399
|
-
|
|
400
|
-
|
|
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
|
|
516
|
+
<!-- Quick Install -->
|
|
517
|
+
<div class="install-block">
|
|
518
|
+
<h3><i class="fas fa-download"></i> Quick Install</h3>
|
|
519
|
+
<div class="install-code">
|
|
520
|
+
<code>npm install @whykusanagi/corrupted-theme</code>
|
|
521
|
+
<button onclick="copyInstall()" title="Copy to clipboard">
|
|
522
|
+
<i class="fas fa-copy"></i>
|
|
406
523
|
</button>
|
|
407
524
|
</div>
|
|
525
|
+
</div>
|
|
526
|
+
|
|
527
|
+
<!-- Documentation Categories -->
|
|
528
|
+
<section>
|
|
529
|
+
<div class="section-header">
|
|
530
|
+
<h2>Explore the Design System</h2>
|
|
531
|
+
<p>Everything you need to build beautiful, accessible interfaces</p>
|
|
532
|
+
</div>
|
|
408
533
|
|
|
409
|
-
<div class="
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
534
|
+
<div class="category-grid">
|
|
535
|
+
<!-- Core Components -->
|
|
536
|
+
<a href="showcase-complete.html" class="category-card">
|
|
537
|
+
<div class="category-icon">
|
|
538
|
+
<i class="fas fa-cube"></i>
|
|
539
|
+
</div>
|
|
540
|
+
<h3>Core Components</h3>
|
|
541
|
+
<p>
|
|
542
|
+
Complete UI component library including buttons, cards, modals, forms,
|
|
543
|
+
navigation, tables, and more with glassmorphism effects.
|
|
544
|
+
</p>
|
|
545
|
+
<div class="card-footer">
|
|
546
|
+
Browse 40+ components <i class="fas fa-arrow-right"></i>
|
|
547
|
+
</div>
|
|
548
|
+
</a>
|
|
549
|
+
|
|
550
|
+
<!-- Extensions -->
|
|
551
|
+
<a href="extensions-showcase.html" class="category-card">
|
|
552
|
+
<div class="category-icon">
|
|
553
|
+
<i class="fas fa-puzzle-piece"></i>
|
|
554
|
+
</div>
|
|
555
|
+
<h3>
|
|
556
|
+
Extensions
|
|
557
|
+
<span class="badge badge-primary">New</span>
|
|
558
|
+
</h3>
|
|
559
|
+
<p>
|
|
560
|
+
Production-tested modules: Gallery system with lightbox, NSFW content blur,
|
|
561
|
+
social links, countdown widgets, and more.
|
|
562
|
+
</p>
|
|
563
|
+
<div class="card-footer">
|
|
564
|
+
Explore extensions <i class="fas fa-arrow-right"></i>
|
|
565
|
+
</div>
|
|
566
|
+
</a>
|
|
567
|
+
|
|
568
|
+
<!-- Glass Components -->
|
|
569
|
+
<a href="showcase-complete.html#glass" class="category-card">
|
|
570
|
+
<div class="category-icon">
|
|
571
|
+
<i class="fas fa-square"></i>
|
|
572
|
+
</div>
|
|
573
|
+
<h3>Glass Components</h3>
|
|
574
|
+
<p>
|
|
575
|
+
Signature glassmorphism components with backdrop blur, dual shadows,
|
|
576
|
+
and smooth transitions. Cards, inputs, buttons, and code blocks.
|
|
577
|
+
</p>
|
|
578
|
+
<div class="card-footer">
|
|
579
|
+
View glass styles <i class="fas fa-arrow-right"></i>
|
|
580
|
+
</div>
|
|
581
|
+
</a>
|
|
582
|
+
|
|
583
|
+
<!-- API Documentation -->
|
|
584
|
+
<a href="showcase-complete.html#api-docs" class="category-card">
|
|
585
|
+
<div class="category-icon">
|
|
586
|
+
<i class="fas fa-code"></i>
|
|
587
|
+
</div>
|
|
588
|
+
<h3>API Documentation</h3>
|
|
589
|
+
<p>
|
|
590
|
+
Ready-made components for building API documentation: endpoints,
|
|
591
|
+
method badges (GET/POST/PUT/DELETE), parameters, and responses.
|
|
592
|
+
</p>
|
|
593
|
+
<div class="card-footer">
|
|
594
|
+
See API components <i class="fas fa-arrow-right"></i>
|
|
595
|
+
</div>
|
|
596
|
+
</a>
|
|
597
|
+
|
|
598
|
+
<!-- Nikke Components -->
|
|
599
|
+
<a href="showcase-complete.html#nikke" class="category-card">
|
|
600
|
+
<div class="category-icon">
|
|
601
|
+
<i class="fas fa-gamepad"></i>
|
|
602
|
+
</div>
|
|
603
|
+
<h3>Nikke Components</h3>
|
|
604
|
+
<p>
|
|
605
|
+
Game-specific UI components: element badges, team position cards,
|
|
606
|
+
unit selection buttons, and themed styling for Nikke applications.
|
|
607
|
+
</p>
|
|
608
|
+
<div class="card-footer">
|
|
609
|
+
Explore Nikke UI <i class="fas fa-arrow-right"></i>
|
|
610
|
+
</div>
|
|
611
|
+
</a>
|
|
612
|
+
|
|
613
|
+
<!-- Animations -->
|
|
614
|
+
<a href="showcase-complete.html#corrupted" class="category-card">
|
|
615
|
+
<div class="category-icon">
|
|
616
|
+
<i class="fas fa-magic"></i>
|
|
617
|
+
</div>
|
|
618
|
+
<h3>Animations & Effects</h3>
|
|
619
|
+
<p>
|
|
620
|
+
Corruption loading screens, glitch text effects, multi-language animations,
|
|
621
|
+
syntax highlighting, and motion utilities.
|
|
622
|
+
</p>
|
|
623
|
+
<div class="card-footer">
|
|
624
|
+
See animations <i class="fas fa-arrow-right"></i>
|
|
625
|
+
</div>
|
|
626
|
+
</a>
|
|
414
627
|
</div>
|
|
415
628
|
</section>
|
|
416
629
|
|
|
417
|
-
<!--
|
|
418
|
-
<section
|
|
419
|
-
<
|
|
420
|
-
|
|
421
|
-
|
|
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>
|
|
630
|
+
<!-- Quick Links -->
|
|
631
|
+
<section>
|
|
632
|
+
<div class="section-header">
|
|
633
|
+
<h2>Quick Links</h2>
|
|
634
|
+
<p>Jump directly to what you need</p>
|
|
440
635
|
</div>
|
|
441
636
|
|
|
442
|
-
<
|
|
443
|
-
<
|
|
444
|
-
|
|
637
|
+
<div class="quick-links">
|
|
638
|
+
<a href="button.html" class="quick-link">
|
|
639
|
+
<i class="fas fa-hand-pointer"></i>
|
|
640
|
+
<span>Buttons</span>
|
|
641
|
+
</a>
|
|
642
|
+
<a href="card.html" class="quick-link">
|
|
643
|
+
<i class="fas fa-square"></i>
|
|
644
|
+
<span>Cards</span>
|
|
645
|
+
</a>
|
|
646
|
+
<a href="form.html" class="quick-link">
|
|
647
|
+
<i class="fas fa-edit"></i>
|
|
648
|
+
<span>Forms</span>
|
|
649
|
+
</a>
|
|
650
|
+
<a href="layout.html" class="quick-link">
|
|
651
|
+
<i class="fas fa-columns"></i>
|
|
652
|
+
<span>Layout</span>
|
|
653
|
+
</a>
|
|
654
|
+
<a href="extensions-showcase.html#gallery-system" class="quick-link">
|
|
655
|
+
<i class="fas fa-images"></i>
|
|
656
|
+
<span>Gallery</span>
|
|
657
|
+
</a>
|
|
658
|
+
<a href="extensions-showcase.html#countdown" class="quick-link">
|
|
659
|
+
<i class="fas fa-hourglass-half"></i>
|
|
660
|
+
<span>Countdown</span>
|
|
661
|
+
</a>
|
|
662
|
+
<a href="extensions-showcase.html#social-links" class="quick-link">
|
|
663
|
+
<i class="fas fa-share-alt"></i>
|
|
664
|
+
<span>Social Links</span>
|
|
665
|
+
</a>
|
|
666
|
+
<a href="nikke-team-builder.html" class="quick-link">
|
|
667
|
+
<i class="fas fa-users"></i>
|
|
668
|
+
<span>Team Builder</span>
|
|
669
|
+
</a>
|
|
670
|
+
</div>
|
|
445
671
|
</section>
|
|
446
672
|
|
|
447
|
-
<!--
|
|
448
|
-
<section
|
|
449
|
-
<
|
|
673
|
+
<!-- Features -->
|
|
674
|
+
<section>
|
|
675
|
+
<div class="section-header">
|
|
676
|
+
<h2>Why Corrupted Theme?</h2>
|
|
677
|
+
<p>Built for developers who demand quality</p>
|
|
678
|
+
</div>
|
|
450
679
|
|
|
451
|
-
<div
|
|
452
|
-
<div
|
|
453
|
-
<
|
|
454
|
-
<
|
|
680
|
+
<div class="features-grid">
|
|
681
|
+
<div class="feature-item">
|
|
682
|
+
<i class="fas fa-paint-brush"></i>
|
|
683
|
+
<h4>Distinctive Aesthetic</h4>
|
|
684
|
+
<p>Dark glassmorphism with pink/purple accents. Stand out from generic Bootstrap clones.</p>
|
|
455
685
|
</div>
|
|
456
|
-
<div
|
|
457
|
-
<
|
|
458
|
-
<
|
|
686
|
+
<div class="feature-item">
|
|
687
|
+
<i class="fas fa-universal-access"></i>
|
|
688
|
+
<h4>Accessible</h4>
|
|
689
|
+
<p>WCAG AA compliant. Semantic HTML, keyboard navigation, focus indicators, reduced motion support.</p>
|
|
459
690
|
</div>
|
|
460
|
-
<div
|
|
461
|
-
<
|
|
462
|
-
<
|
|
691
|
+
<div class="feature-item">
|
|
692
|
+
<i class="fas fa-sliders-h"></i>
|
|
693
|
+
<h4>Fully Customizable</h4>
|
|
694
|
+
<p>100+ CSS variables. Override colors, spacing, borders, shadows—everything.</p>
|
|
463
695
|
</div>
|
|
464
|
-
<div
|
|
465
|
-
<
|
|
466
|
-
<
|
|
696
|
+
<div class="feature-item">
|
|
697
|
+
<i class="fas fa-feather"></i>
|
|
698
|
+
<h4>Zero Dependencies</h4>
|
|
699
|
+
<p>Pure CSS with optional JS enhancements. No jQuery, no frameworks, no bloat.</p>
|
|
467
700
|
</div>
|
|
468
|
-
<div
|
|
469
|
-
<
|
|
470
|
-
<
|
|
701
|
+
<div class="feature-item">
|
|
702
|
+
<i class="fas fa-mobile-alt"></i>
|
|
703
|
+
<h4>Responsive</h4>
|
|
704
|
+
<p>Mobile-first design. Every component adapts beautifully from phone to desktop.</p>
|
|
471
705
|
</div>
|
|
472
|
-
<div
|
|
473
|
-
<
|
|
474
|
-
<
|
|
706
|
+
<div class="feature-item">
|
|
707
|
+
<i class="fas fa-check-double"></i>
|
|
708
|
+
<h4>Production Tested</h4>
|
|
709
|
+
<p>Battle-tested on whykusanagi.xyz. Real-world components, not just demos.</p>
|
|
475
710
|
</div>
|
|
476
711
|
</div>
|
|
477
712
|
</section>
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
<a href="../
|
|
485
|
-
<a href="
|
|
713
|
+
</main>
|
|
714
|
+
|
|
715
|
+
<!-- Footer -->
|
|
716
|
+
<footer class="landing-footer">
|
|
717
|
+
<div class="footer-content">
|
|
718
|
+
<div class="footer-links">
|
|
719
|
+
<a href="../README.md"><i class="fas fa-book"></i> Documentation</a>
|
|
720
|
+
<a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-list"></i> Component Reference</a>
|
|
721
|
+
<a href="https://github.com/whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-github"></i> GitHub</a>
|
|
722
|
+
<a href="https://www.npmjs.com/package/@whykusanagi/corrupted-theme" target="_blank"><i class="fab fa-npm"></i> npm</a>
|
|
723
|
+
</div>
|
|
724
|
+
<p class="footer-meta">
|
|
725
|
+
Corrupted Theme v0.1.2 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by
|
|
726
|
+
<a href="https://whykusanagi.xyz" target="_blank">@whykusanagi</a>
|
|
486
727
|
</p>
|
|
487
|
-
</
|
|
488
|
-
</
|
|
728
|
+
</div>
|
|
729
|
+
</footer>
|
|
489
730
|
|
|
490
731
|
<script>
|
|
491
|
-
function
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
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
|
-
});
|
|
732
|
+
function copyInstall() {
|
|
733
|
+
navigator.clipboard.writeText('npm install @whykusanagi/corrupted-theme');
|
|
734
|
+
const btn = document.querySelector('.install-code button');
|
|
735
|
+
const originalHTML = btn.innerHTML;
|
|
736
|
+
btn.innerHTML = '<i class="fas fa-check"></i>';
|
|
737
|
+
setTimeout(() => {
|
|
738
|
+
btn.innerHTML = originalHTML;
|
|
739
|
+
}, 2000);
|
|
740
|
+
}
|
|
518
741
|
</script>
|
|
519
742
|
</body>
|
|
520
743
|
</html>
|