@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,678 @@
|
|
|
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>Card Components - 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
|
+
<style>
|
|
10
|
+
.container {
|
|
11
|
+
max-width: 1200px;
|
|
12
|
+
margin: 0 auto;
|
|
13
|
+
padding: var(--spacing-lg);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.section {
|
|
17
|
+
margin-bottom: var(--spacing-2xl);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
.section h2 {
|
|
21
|
+
color: var(--accent);
|
|
22
|
+
margin-bottom: var(--spacing-lg);
|
|
23
|
+
font-size: 1.5rem;
|
|
24
|
+
padding-bottom: var(--spacing-md);
|
|
25
|
+
border-bottom: 2px solid var(--border);
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
.cards-grid {
|
|
29
|
+
display: grid;
|
|
30
|
+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
31
|
+
gap: var(--spacing-lg);
|
|
32
|
+
margin-bottom: var(--spacing-lg);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.card-demo {
|
|
36
|
+
position: relative;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
.card-label {
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: -30px;
|
|
42
|
+
left: 0;
|
|
43
|
+
font-size: 0.85rem;
|
|
44
|
+
color: var(--text-secondary);
|
|
45
|
+
text-transform: uppercase;
|
|
46
|
+
letter-spacing: 1px;
|
|
47
|
+
font-weight: 500;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.card-with-image {
|
|
51
|
+
overflow: hidden;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.card-image {
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 200px;
|
|
57
|
+
background: linear-gradient(135deg, #d94f90 0%, #b61b70 100%);
|
|
58
|
+
display: flex;
|
|
59
|
+
align-items: center;
|
|
60
|
+
justify-content: center;
|
|
61
|
+
color: white;
|
|
62
|
+
font-size: 3rem;
|
|
63
|
+
margin-bottom: var(--spacing-md);
|
|
64
|
+
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.card-content {
|
|
68
|
+
padding: var(--spacing-lg);
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.card-meta {
|
|
72
|
+
display: flex;
|
|
73
|
+
justify-content: space-between;
|
|
74
|
+
align-items: center;
|
|
75
|
+
margin-top: var(--spacing-md);
|
|
76
|
+
font-size: 0.875rem;
|
|
77
|
+
color: var(--text-secondary);
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.card-footer {
|
|
81
|
+
display: flex;
|
|
82
|
+
gap: var(--spacing-sm);
|
|
83
|
+
margin-top: var(--spacing-md);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.card-footer button {
|
|
87
|
+
flex: 1;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.code-block {
|
|
91
|
+
background: var(--bg);
|
|
92
|
+
border: 1px solid var(--border);
|
|
93
|
+
border-radius: var(--radius-md);
|
|
94
|
+
padding: var(--spacing-md);
|
|
95
|
+
margin-top: var(--spacing-md);
|
|
96
|
+
font-family: 'Courier New', monospace;
|
|
97
|
+
font-size: 0.875rem;
|
|
98
|
+
color: var(--text-secondary);
|
|
99
|
+
overflow-x: auto;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.icon-grid {
|
|
103
|
+
display: grid;
|
|
104
|
+
grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
|
|
105
|
+
gap: var(--spacing-md);
|
|
106
|
+
margin-bottom: var(--spacing-lg);
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.icon-box {
|
|
110
|
+
display: flex;
|
|
111
|
+
align-items: center;
|
|
112
|
+
justify-content: center;
|
|
113
|
+
height: 80px;
|
|
114
|
+
background: var(--glass);
|
|
115
|
+
border: 1px solid var(--border);
|
|
116
|
+
border-radius: var(--radius-lg);
|
|
117
|
+
color: var(--accent);
|
|
118
|
+
font-size: 2rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
.testimonial-card {
|
|
122
|
+
background: var(--glass);
|
|
123
|
+
border: 1px solid var(--border);
|
|
124
|
+
border-radius: var(--radius-lg);
|
|
125
|
+
padding: var(--spacing-lg);
|
|
126
|
+
position: relative;
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
.quote-mark {
|
|
130
|
+
position: absolute;
|
|
131
|
+
top: var(--spacing-md);
|
|
132
|
+
left: var(--spacing-md);
|
|
133
|
+
font-size: 3rem;
|
|
134
|
+
color: var(--accent);
|
|
135
|
+
opacity: 0.3;
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
.testimonial-text {
|
|
139
|
+
margin-bottom: var(--spacing-md);
|
|
140
|
+
font-style: italic;
|
|
141
|
+
line-height: 1.8;
|
|
142
|
+
padding-left: var(--spacing-lg);
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.testimonial-author {
|
|
146
|
+
display: flex;
|
|
147
|
+
align-items: center;
|
|
148
|
+
gap: var(--spacing-md);
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.author-avatar {
|
|
152
|
+
width: 50px;
|
|
153
|
+
height: 50px;
|
|
154
|
+
border-radius: 50%;
|
|
155
|
+
background: var(--gradient-accent);
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
justify-content: center;
|
|
159
|
+
color: white;
|
|
160
|
+
font-weight: bold;
|
|
161
|
+
font-size: 1.25rem;
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
.author-info {
|
|
165
|
+
flex: 1;
|
|
166
|
+
}
|
|
167
|
+
|
|
168
|
+
.author-name {
|
|
169
|
+
font-weight: 600;
|
|
170
|
+
color: var(--text);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.author-title {
|
|
174
|
+
font-size: 0.875rem;
|
|
175
|
+
color: var(--text-secondary);
|
|
176
|
+
}
|
|
177
|
+
|
|
178
|
+
.stat-card {
|
|
179
|
+
text-align: center;
|
|
180
|
+
padding: var(--spacing-lg);
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
.stat-number {
|
|
184
|
+
font-size: 2.5rem;
|
|
185
|
+
font-weight: bold;
|
|
186
|
+
color: var(--accent);
|
|
187
|
+
margin-bottom: var(--spacing-sm);
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
.stat-label {
|
|
191
|
+
font-size: 0.875rem;
|
|
192
|
+
color: var(--text-secondary);
|
|
193
|
+
text-transform: uppercase;
|
|
194
|
+
letter-spacing: 1px;
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
.status-badge {
|
|
198
|
+
display: inline-block;
|
|
199
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
200
|
+
border-radius: var(--radius-sm);
|
|
201
|
+
font-size: 0.75rem;
|
|
202
|
+
font-weight: 600;
|
|
203
|
+
text-transform: uppercase;
|
|
204
|
+
letter-spacing: 0.5px;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.status-active {
|
|
208
|
+
background: rgba(34, 197, 94, 0.2);
|
|
209
|
+
color: var(--color-success);
|
|
210
|
+
border: 1px solid var(--color-success);
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.status-pending {
|
|
214
|
+
background: rgba(234, 179, 8, 0.2);
|
|
215
|
+
color: var(--color-warning);
|
|
216
|
+
border: 1px solid var(--color-warning);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.comparison-grid {
|
|
220
|
+
display: grid;
|
|
221
|
+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
222
|
+
gap: var(--spacing-lg);
|
|
223
|
+
margin-bottom: var(--spacing-lg);
|
|
224
|
+
}
|
|
225
|
+
</style>
|
|
226
|
+
</head>
|
|
227
|
+
<body>
|
|
228
|
+
<nav class="navbar">
|
|
229
|
+
<div class="navbar-content">
|
|
230
|
+
<a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
|
|
231
|
+
<div class="navbar-links">
|
|
232
|
+
<a href="#basic">Basic</a>
|
|
233
|
+
<a href="#with-image">Images</a>
|
|
234
|
+
<a href="#testimonial">Testimonials</a>
|
|
235
|
+
<a href="#stats">Stats</a>
|
|
236
|
+
<a href="#product">Product</a>
|
|
237
|
+
</div>
|
|
238
|
+
</div>
|
|
239
|
+
</nav>
|
|
240
|
+
|
|
241
|
+
<div class="container">
|
|
242
|
+
<h1><i class="fas fa-rectangle"></i> Card Components</h1>
|
|
243
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
|
|
244
|
+
Flexible card components for displaying content, products, testimonials, and more.
|
|
245
|
+
</p>
|
|
246
|
+
|
|
247
|
+
<!-- Basic Cards -->
|
|
248
|
+
<section id="basic" class="section">
|
|
249
|
+
<h2>Basic Cards</h2>
|
|
250
|
+
|
|
251
|
+
<div class="cards-grid">
|
|
252
|
+
<div class="card-demo">
|
|
253
|
+
<div class="card-label">Standard</div>
|
|
254
|
+
<div class="card">
|
|
255
|
+
<h3>Card Title</h3>
|
|
256
|
+
<p>This is a basic card component with standard glass morphism effects. Perfect for general content.</p>
|
|
257
|
+
<a href="#" style="color: var(--accent); text-decoration: none; display: inline-block; margin-top: var(--spacing-md);">
|
|
258
|
+
Learn more <i class="fas fa-arrow-right" style="margin-left: var(--spacing-xs);"></i>
|
|
259
|
+
</a>
|
|
260
|
+
</div>
|
|
261
|
+
</div>
|
|
262
|
+
|
|
263
|
+
<div class="card-demo">
|
|
264
|
+
<div class="card-label">Small</div>
|
|
265
|
+
<div class="card" style="padding: var(--spacing-md);">
|
|
266
|
+
<h4>Compact Card</h4>
|
|
267
|
+
<p style="font-size: 0.95rem;">A smaller card variant with reduced padding, ideal for dense layouts.</p>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<div class="card-demo">
|
|
272
|
+
<div class="card-label">Large</div>
|
|
273
|
+
<div class="card" style="padding: var(--spacing-xl);">
|
|
274
|
+
<h2>Featured Card</h2>
|
|
275
|
+
<p style="line-height: 1.8;">A larger card with more breathing room, great for highlighting important content or promotions.</p>
|
|
276
|
+
<button class="btn btn-sm" style="margin-top: var(--spacing-lg);">Learn More</button>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
</div>
|
|
280
|
+
|
|
281
|
+
<div class="code-block">
|
|
282
|
+
<div class="card">
|
|
283
|
+
<h3>Card Title</h3>
|
|
284
|
+
<p>Card content goes here...</p>
|
|
285
|
+
<a href="#">Learn more</a>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<!-- Small variant -->
|
|
289
|
+
<div class="card" style="padding: var(--spacing-md);">...</div>
|
|
290
|
+
|
|
291
|
+
<!-- Large variant -->
|
|
292
|
+
<div class="card" style="padding: var(--spacing-xl);">...</div>
|
|
293
|
+
</div>
|
|
294
|
+
</section>
|
|
295
|
+
|
|
296
|
+
<!-- Cards with Images -->
|
|
297
|
+
<section id="with-image" class="section">
|
|
298
|
+
<h2>Cards with Images</h2>
|
|
299
|
+
|
|
300
|
+
<div class="cards-grid">
|
|
301
|
+
<div class="card-demo">
|
|
302
|
+
<div class="card-label">Image Header</div>
|
|
303
|
+
<div class="card card-with-image">
|
|
304
|
+
<div class="card-image">
|
|
305
|
+
<i class="fas fa-image"></i>
|
|
306
|
+
</div>
|
|
307
|
+
<div class="card-content">
|
|
308
|
+
<h3>Article Title</h3>
|
|
309
|
+
<p>A card with an image header. Great for blog posts, articles, and content showcases.</p>
|
|
310
|
+
<div class="card-meta">
|
|
311
|
+
<span><i class="fas fa-calendar"></i> Nov 23, 2025</span>
|
|
312
|
+
<span><i class="fas fa-user"></i> Author</span>
|
|
313
|
+
</div>
|
|
314
|
+
</div>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
|
|
318
|
+
<div class="card-demo">
|
|
319
|
+
<div class="card-label">Icon Badge</div>
|
|
320
|
+
<div class="card">
|
|
321
|
+
<div style="text-align: center; margin-bottom: var(--spacing-lg);">
|
|
322
|
+
<div style="
|
|
323
|
+
width: 80px;
|
|
324
|
+
height: 80px;
|
|
325
|
+
margin: 0 auto var(--spacing-md);
|
|
326
|
+
background: var(--gradient-accent);
|
|
327
|
+
border-radius: var(--radius-lg);
|
|
328
|
+
display: flex;
|
|
329
|
+
align-items: center;
|
|
330
|
+
justify-content: center;
|
|
331
|
+
color: white;
|
|
332
|
+
font-size: 2rem;
|
|
333
|
+
">
|
|
334
|
+
<i class="fas fa-star"></i>
|
|
335
|
+
</div>
|
|
336
|
+
<h3>Feature Card</h3>
|
|
337
|
+
<p>Cards with icon badges for highlighting features or benefits.</p>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
|
|
342
|
+
<div class="card-demo">
|
|
343
|
+
<div class="card-label">Image + Overlay</div>
|
|
344
|
+
<div class="card card-with-image">
|
|
345
|
+
<div style="
|
|
346
|
+
position: relative;
|
|
347
|
+
height: 200px;
|
|
348
|
+
background: linear-gradient(135deg, #8b5cf6 0%, #d94f90 100%);
|
|
349
|
+
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
350
|
+
display: flex;
|
|
351
|
+
align-items: center;
|
|
352
|
+
justify-content: center;
|
|
353
|
+
color: white;
|
|
354
|
+
font-size: 2rem;
|
|
355
|
+
">
|
|
356
|
+
<i class="fas fa-video"></i>
|
|
357
|
+
</div>
|
|
358
|
+
<div class="card-content">
|
|
359
|
+
<h3>Video Content</h3>
|
|
360
|
+
<p>Cards can display media with overlay effects.</p>
|
|
361
|
+
<button class="btn btn-sm">
|
|
362
|
+
<i class="fas fa-play"></i> Watch
|
|
363
|
+
</button>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</div>
|
|
367
|
+
</div>
|
|
368
|
+
|
|
369
|
+
<div class="code-block">
|
|
370
|
+
<div class="card card-with-image">
|
|
371
|
+
<div class="card-image">
|
|
372
|
+
<i class="fas fa-image"></i>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="card-content">
|
|
375
|
+
<h3>Title</h3>
|
|
376
|
+
<p>Description...</p>
|
|
377
|
+
</div>
|
|
378
|
+
</div>
|
|
379
|
+
</div>
|
|
380
|
+
</section>
|
|
381
|
+
|
|
382
|
+
<!-- Testimonial Cards -->
|
|
383
|
+
<section id="testimonial" class="section">
|
|
384
|
+
<h2>Testimonial Cards</h2>
|
|
385
|
+
|
|
386
|
+
<div class="cards-grid">
|
|
387
|
+
<div class="card-demo">
|
|
388
|
+
<div class="card-label">Testimonial</div>
|
|
389
|
+
<div class="testimonial-card">
|
|
390
|
+
<div class="quote-mark">"</div>
|
|
391
|
+
<div class="testimonial-text">
|
|
392
|
+
This theme is absolutely amazing! The attention to detail and thoughtful design made it so easy to use.
|
|
393
|
+
</div>
|
|
394
|
+
<div class="testimonial-author">
|
|
395
|
+
<div class="author-avatar">JD</div>
|
|
396
|
+
<div class="author-info">
|
|
397
|
+
<div class="author-name">Jane Doe</div>
|
|
398
|
+
<div class="author-title">Designer</div>
|
|
399
|
+
</div>
|
|
400
|
+
</div>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<div class="card-demo">
|
|
405
|
+
<div class="card-label">With Rating</div>
|
|
406
|
+
<div class="testimonial-card">
|
|
407
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
408
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
409
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
410
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
411
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
412
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="quote-mark">"</div>
|
|
415
|
+
<div class="testimonial-text">
|
|
416
|
+
Best design system I've used. Highly recommended for any project!
|
|
417
|
+
</div>
|
|
418
|
+
<div class="testimonial-author">
|
|
419
|
+
<div class="author-avatar" style="background: linear-gradient(135deg, #3b82f6, #1e40af);">JW</div>
|
|
420
|
+
<div class="author-info">
|
|
421
|
+
<div class="author-name">John Wilson</div>
|
|
422
|
+
<div class="author-title">Developer</div>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
|
|
428
|
+
<div class="card-demo">
|
|
429
|
+
<div class="card-label">Multiple Reviews</div>
|
|
430
|
+
<div class="testimonial-card">
|
|
431
|
+
<div style="display: flex; gap: var(--spacing-md); margin-bottom: var(--spacing-md); overflow-x: auto;">
|
|
432
|
+
<div style="display: flex; gap: var(--spacing-xs);">
|
|
433
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
434
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
435
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
436
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
437
|
+
<i class="fas fa-star" style="color: #f59e0b;"></i>
|
|
438
|
+
</div>
|
|
439
|
+
<span style="color: var(--text-secondary); white-space: nowrap;">245 reviews</span>
|
|
440
|
+
</div>
|
|
441
|
+
<p style="font-size: 0.95rem; margin: 0;">
|
|
442
|
+
"Amazing quality and support. Exactly what I was looking for!"
|
|
443
|
+
</p>
|
|
444
|
+
</div>
|
|
445
|
+
</div>
|
|
446
|
+
</div>
|
|
447
|
+
|
|
448
|
+
<div class="code-block">
|
|
449
|
+
<div class="testimonial-card">
|
|
450
|
+
<div class="quote-mark">"</div>
|
|
451
|
+
<div class="testimonial-text">Great product!</div>
|
|
452
|
+
<div class="testimonial-author">
|
|
453
|
+
<div class="author-avatar">JD</div>
|
|
454
|
+
<div class="author-info">
|
|
455
|
+
<div class="author-name">Jane Doe</div>
|
|
456
|
+
<div class="author-title">Designer</div>
|
|
457
|
+
</div>
|
|
458
|
+
</div>
|
|
459
|
+
</div>
|
|
460
|
+
</div>
|
|
461
|
+
</section>
|
|
462
|
+
|
|
463
|
+
<!-- Stat Cards -->
|
|
464
|
+
<section id="stats" class="section">
|
|
465
|
+
<h2>Stat Cards</h2>
|
|
466
|
+
|
|
467
|
+
<div class="cards-grid">
|
|
468
|
+
<div class="card-demo">
|
|
469
|
+
<div class="card-label">Simple Stat</div>
|
|
470
|
+
<div class="card stat-card">
|
|
471
|
+
<div class="stat-number">2.5M</div>
|
|
472
|
+
<div class="stat-label">Users</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="card-demo">
|
|
477
|
+
<div class="card-label">With Icon</div>
|
|
478
|
+
<div class="card" style="text-align: center; padding: var(--spacing-lg);">
|
|
479
|
+
<div style="font-size: 3rem; color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
480
|
+
<i class="fas fa-rocket"></i>
|
|
481
|
+
</div>
|
|
482
|
+
<div style="font-size: 2rem; font-weight: bold; color: var(--accent); margin-bottom: var(--spacing-sm);">
|
|
483
|
+
99.9%
|
|
484
|
+
</div>
|
|
485
|
+
<div style="font-size: 0.875rem; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 1px;">
|
|
486
|
+
Uptime
|
|
487
|
+
</div>
|
|
488
|
+
</div>
|
|
489
|
+
</div>
|
|
490
|
+
|
|
491
|
+
<div class="card-demo">
|
|
492
|
+
<div class="card-label">With Progress</div>
|
|
493
|
+
<div class="card" style="padding: var(--spacing-lg);">
|
|
494
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
495
|
+
<h4 style="margin-bottom: var(--spacing-sm); font-size: 0.95rem;">Completion</h4>
|
|
496
|
+
<div style="
|
|
497
|
+
height: 8px;
|
|
498
|
+
background: var(--bg-secondary);
|
|
499
|
+
border-radius: var(--radius-sm);
|
|
500
|
+
overflow: hidden;
|
|
501
|
+
">
|
|
502
|
+
<div style="
|
|
503
|
+
height: 100%;
|
|
504
|
+
width: 75%;
|
|
505
|
+
background: var(--gradient-accent);
|
|
506
|
+
border-radius: var(--radius-sm);
|
|
507
|
+
"></div>
|
|
508
|
+
</div>
|
|
509
|
+
<div style="font-size: 0.85rem; color: var(--text-secondary); margin-top: var(--spacing-xs);">
|
|
510
|
+
75% Complete
|
|
511
|
+
</div>
|
|
512
|
+
</div>
|
|
513
|
+
</div>
|
|
514
|
+
</div>
|
|
515
|
+
</div>
|
|
516
|
+
|
|
517
|
+
<div class="code-block">
|
|
518
|
+
<div class="card stat-card">
|
|
519
|
+
<div class="stat-number">2.5M</div>
|
|
520
|
+
<div class="stat-label">Users</div>
|
|
521
|
+
</div>
|
|
522
|
+
|
|
523
|
+
<div class="card">
|
|
524
|
+
<div style="font-size: 3rem; color: var(--accent);">
|
|
525
|
+
<i class="fas fa-rocket"></i>
|
|
526
|
+
</div>
|
|
527
|
+
<div style="font-size: 2rem; color: var(--accent);">99.9%</div>
|
|
528
|
+
<div>Uptime</div>
|
|
529
|
+
</div>
|
|
530
|
+
</div>
|
|
531
|
+
</section>
|
|
532
|
+
|
|
533
|
+
<!-- Product Cards -->
|
|
534
|
+
<section id="product" class="section">
|
|
535
|
+
<h2>Product Cards</h2>
|
|
536
|
+
|
|
537
|
+
<div class="cards-grid">
|
|
538
|
+
<div class="card-demo">
|
|
539
|
+
<div class="card-label">Product</div>
|
|
540
|
+
<div class="card card-with-image">
|
|
541
|
+
<div class="card-image" style="background: linear-gradient(135deg, #8b5cf6, #d94f90);">
|
|
542
|
+
<i class="fas fa-box"></i>
|
|
543
|
+
</div>
|
|
544
|
+
<div class="card-content">
|
|
545
|
+
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: var(--spacing-md);">
|
|
546
|
+
<div>
|
|
547
|
+
<h3 style="margin: 0;">Product Name</h3>
|
|
548
|
+
<p style="margin: var(--spacing-xs) 0; color: var(--text-secondary); font-size: 0.85rem;">Category</p>
|
|
549
|
+
</div>
|
|
550
|
+
<span class="status-badge status-active">Active</span>
|
|
551
|
+
</div>
|
|
552
|
+
<p style="font-size: 0.95rem;">Great product with excellent features and quality.</p>
|
|
553
|
+
<div class="card-meta">
|
|
554
|
+
<span><strong>$29.99</strong></span>
|
|
555
|
+
<span>⭐ 4.8 (124)</span>
|
|
556
|
+
</div>
|
|
557
|
+
<div class="card-footer">
|
|
558
|
+
<button class="btn btn-sm">Add to Cart</button>
|
|
559
|
+
<button class="btn btn-sm btn-ghost">
|
|
560
|
+
<i class="fas fa-heart"></i>
|
|
561
|
+
</button>
|
|
562
|
+
</div>
|
|
563
|
+
</div>
|
|
564
|
+
</div>
|
|
565
|
+
</div>
|
|
566
|
+
|
|
567
|
+
<div class="card-demo">
|
|
568
|
+
<div class="card-label">Sale Item</div>
|
|
569
|
+
<div class="card card-with-image">
|
|
570
|
+
<div style="
|
|
571
|
+
position: relative;
|
|
572
|
+
height: 200px;
|
|
573
|
+
background: linear-gradient(135deg, #d94f90, #b61b70);
|
|
574
|
+
border-radius: var(--radius-xl) var(--radius-xl) 0 0;
|
|
575
|
+
display: flex;
|
|
576
|
+
align-items: center;
|
|
577
|
+
justify-content: center;
|
|
578
|
+
color: white;
|
|
579
|
+
font-size: 2rem;
|
|
580
|
+
">
|
|
581
|
+
<i class="fas fa-shopping-bag"></i>
|
|
582
|
+
<div style="
|
|
583
|
+
position: absolute;
|
|
584
|
+
top: 10px;
|
|
585
|
+
right: 10px;
|
|
586
|
+
background: var(--color-error);
|
|
587
|
+
color: white;
|
|
588
|
+
padding: var(--spacing-xs) var(--spacing-sm);
|
|
589
|
+
border-radius: var(--radius-sm);
|
|
590
|
+
font-size: 0.85rem;
|
|
591
|
+
font-weight: bold;
|
|
592
|
+
">-30%</div>
|
|
593
|
+
</div>
|
|
594
|
+
<div class="card-content">
|
|
595
|
+
<h3>Sale Product</h3>
|
|
596
|
+
<p style="margin: var(--spacing-xs) 0; text-decoration: line-through; color: var(--text-secondary);">$59.99</p>
|
|
597
|
+
<p style="font-size: 1.25rem; color: var(--accent); font-weight: bold; margin: var(--spacing-xs) 0;">$41.99</p>
|
|
598
|
+
<button class="btn btn-sm" style="width: 100%; margin-top: var(--spacing-md);">Buy Now</button>
|
|
599
|
+
</div>
|
|
600
|
+
</div>
|
|
601
|
+
</div>
|
|
602
|
+
|
|
603
|
+
<div class="card-demo">
|
|
604
|
+
<div class="card-label">Coming Soon</div>
|
|
605
|
+
<div class="card card-with-image">
|
|
606
|
+
<div class="card-image" style="opacity: 0.5;">
|
|
607
|
+
<i class="fas fa-eye-slash"></i>
|
|
608
|
+
</div>
|
|
609
|
+
<div class="card-content">
|
|
610
|
+
<h3>Upcoming Product</h3>
|
|
611
|
+
<p>Available soon! Notify me when this product launches.</p>
|
|
612
|
+
<span class="status-badge status-pending">Coming Soon</span>
|
|
613
|
+
<button class="btn btn-sm btn-ghost" style="width: 100%; margin-top: var(--spacing-md);">
|
|
614
|
+
Notify Me
|
|
615
|
+
</button>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
</div>
|
|
619
|
+
</div>
|
|
620
|
+
|
|
621
|
+
<div class="code-block">
|
|
622
|
+
<div class="card card-with-image">
|
|
623
|
+
<div class="card-image">...</div>
|
|
624
|
+
<div class="card-content">
|
|
625
|
+
<h3>Product Name</h3>
|
|
626
|
+
<p>Description...</p>
|
|
627
|
+
<div class="card-meta">
|
|
628
|
+
<span><strong>$29.99</strong></span>
|
|
629
|
+
<span>Rating</span>
|
|
630
|
+
</div>
|
|
631
|
+
<div class="card-footer">
|
|
632
|
+
<button class="btn btn-sm">Add to Cart</button>
|
|
633
|
+
</div>
|
|
634
|
+
</div>
|
|
635
|
+
</div>
|
|
636
|
+
</div>
|
|
637
|
+
</section>
|
|
638
|
+
|
|
639
|
+
<!-- Frosted Cards -->
|
|
640
|
+
<section class="section">
|
|
641
|
+
<h2>Frosted Glass Cards</h2>
|
|
642
|
+
|
|
643
|
+
<div class="cards-grid">
|
|
644
|
+
<div class="frosted-card">
|
|
645
|
+
<h3>Frosted Glass</h3>
|
|
646
|
+
<p>Enhanced glass effect with stronger blur and opacity for premium feel.</p>
|
|
647
|
+
</div>
|
|
648
|
+
|
|
649
|
+
<div class="frosted-card">
|
|
650
|
+
<i class="fas fa-lock" style="font-size: 2rem; color: var(--accent); margin-bottom: var(--spacing-md);"></i>
|
|
651
|
+
<h4>Secure & Safe</h4>
|
|
652
|
+
<p style="font-size: 0.95rem;">All data encrypted and protected.</p>
|
|
653
|
+
</div>
|
|
654
|
+
|
|
655
|
+
<div class="frosted-card">
|
|
656
|
+
<i class="fas fa-bolt" style="font-size: 2rem; color: var(--accent); margin-bottom: var(--spacing-md);"></i>
|
|
657
|
+
<h4>Lightning Fast</h4>
|
|
658
|
+
<p style="font-size: 0.95rem;">Optimized for speed and performance.</p>
|
|
659
|
+
</div>
|
|
660
|
+
</div>
|
|
661
|
+
|
|
662
|
+
<div class="code-block">
|
|
663
|
+
<div class="frosted-card">
|
|
664
|
+
<h3>Title</h3>
|
|
665
|
+
<p>Content...</p>
|
|
666
|
+
</div>
|
|
667
|
+
</div>
|
|
668
|
+
</section>
|
|
669
|
+
|
|
670
|
+
<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);">
|
|
671
|
+
<p>Card Components Documentation • Corrupted Theme v0.1.0</p>
|
|
672
|
+
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
673
|
+
<a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a>
|
|
674
|
+
</p>
|
|
675
|
+
</footer>
|
|
676
|
+
</div>
|
|
677
|
+
</body>
|
|
678
|
+
</html>
|