@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.
Files changed (21) hide show
  1. package/CHANGELOG.md +162 -0
  2. package/README.md +209 -14
  3. package/docs/COMPONENTS_REFERENCE.md +295 -8
  4. package/examples/assets/celeste-avatar.png +0 -0
  5. package/examples/button.html +21 -9
  6. package/examples/card.html +21 -8
  7. package/examples/extensions-showcase.html +716 -0
  8. package/examples/form.html +21 -8
  9. package/examples/index.html +619 -396
  10. package/examples/layout.html +21 -7
  11. package/examples/nikke-team-builder.html +22 -8
  12. package/examples/showcase-complete.html +44 -13
  13. package/examples/showcase.html +20 -7
  14. package/package.json +12 -5
  15. package/src/css/components.css +101 -2
  16. package/src/css/extensions.css +933 -0
  17. package/src/css/theme.css +6 -176
  18. package/src/css/typography.css +5 -0
  19. package/src/css/variables.css +1 -1
  20. package/src/lib/countdown-widget.js +609 -0
  21. package/src/lib/gallery.js +481 -0
package/examples/layout.html CHANGED
@@ -168,15 +168,29 @@
168
168
  </style>
169
169
  </head>
170
170
  <body>
171
+ <!-- Global Navigation -->
171
172
  <nav class="navbar">
172
173
  <div class="navbar-content">
173
- <a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
174
- <div class="navbar-links">
175
- <a href="#grid">Grid</a>
176
- <a href="#flex">Flexbox</a>
177
- <a href="#sidebar">Sidebar</a>
178
- <a href="#hero">Hero</a>
179
- </div>
174
+ <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
175
+ <ul class="navbar-links">
176
+ <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
177
+ <li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
178
+ <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
179
+ <li class="has-submenu">
180
+ <a href="#" class="active">
181
+ <i class="fas fa-flask"></i> Examples
182
+ <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
183
+ </a>
184
+ <div class="submenu">
185
+ <a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
186
+ <a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
187
+ <a href="card.html"><i class="fas fa-square"></i> Cards</a>
188
+ <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
189
+ <a href="layout.html" class="active"><i class="fas fa-columns"></i> Layouts</a>
190
+ </div>
191
+ </li>
192
+ <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
193
+ </ul>
180
194
  </div>
181
195
  </nav>
182
196
 
package/examples/nikke-team-builder.html CHANGED
@@ -175,15 +175,29 @@
175
175
  </style>
176
176
  </head>
177
177
  <body>
178
+ <!-- Global Navigation -->
178
179
  <nav class="navbar">
179
180
  <div class="navbar-content">
180
- <a href="index.html" class="navbar-logo"><i class="fas fa-arrow-left"></i> Back</a>
181
- <div class="navbar-links">
182
- <a href="#elements">Elements</a>
183
- <a href="#team">Team Builder</a>
184
- <a href="#units">Units</a>
185
- <a href="#code">Code</a>
186
- </div>
181
+ <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
182
+ <ul class="navbar-links">
183
+ <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
184
+ <li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
185
+ <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
186
+ <li class="has-submenu">
187
+ <a href="#" class="active">
188
+ <i class="fas fa-flask"></i> Examples
189
+ <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
190
+ </a>
191
+ <div class="submenu">
192
+ <a href="nikke-team-builder.html" class="active"><i class="fas fa-users"></i> Nikke Team Builder</a>
193
+ <a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
194
+ <a href="card.html"><i class="fas fa-square"></i> Cards</a>
195
+ <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
196
+ <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
197
+ </div>
198
+ </li>
199
+ <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
200
+ </ul>
187
201
  </div>
188
202
  </nav>
189
203
 
@@ -552,7 +566,7 @@
552
566
  <p>Nikke Team Builder Example • Corrupted Theme v0.1.0</p>
553
567
  <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
554
568
  <a href="index.html" style="color: var(--accent); text-decoration: none;">← Back to Showcase</a> •
555
- <a href="../docs/NIKKE_COMPONENTS.md" style="color: var(--accent); text-decoration: none;">Documentation</a>
569
+ <a href="../docs/COMPONENTS_REFERENCE.md#nikke-components" style="color: var(--accent); text-decoration: none;">Documentation</a>
556
570
  </p>
557
571
  </footer>
558
572
  </div>
package/examples/showcase-complete.html CHANGED
@@ -98,7 +98,7 @@
98
98
  }
99
99
 
100
100
  .bg-demo {
101
- background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=800');
101
+ background: linear-gradient(135deg, #2d1f3d 0%, #1a1a2e 50%, #0a0a0a 100%);
102
102
  background-size: cover;
103
103
  background-position: center;
104
104
  min-height: 300px;
@@ -114,17 +114,42 @@
114
114
  </head>
115
115
  <body>
116
116
  <!-- Navigation -->
117
+ <!-- Global Navigation -->
117
118
  <nav class="navbar">
118
119
  <div class="navbar-content">
119
- <a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
120
+ <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
120
121
  <ul class="navbar-links">
121
- <li><a href="#glass-components" class="active">Glass</a></li>
122
- <li><a href="#components">Components</a></li>
123
- <li><a href="#navigation">Navigation</a></li>
124
- <li><a href="#api-docs">API Docs</a></li>
125
- <li><a href="#nikke">Nikke</a></li>
126
- <li><a href="#corrupted">Corrupted</a></li>
127
- <li><a href="#utilities">Utilities</a></li>
122
+ <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
123
+ <li class="has-submenu">
124
+ <a href="#" class="active">
125
+ <i class="fas fa-cube"></i> Components
126
+ <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
127
+ </a>
128
+ <div class="submenu">
129
+ <a href="#glass-components"><i class="fas fa-square"></i> Glass</a>
130
+ <a href="#components"><i class="fas fa-shapes"></i> Standard</a>
131
+ <a href="#navigation"><i class="fas fa-bars"></i> Navigation</a>
132
+ <a href="#api-docs"><i class="fas fa-code"></i> API Docs</a>
133
+ <a href="#nikke"><i class="fas fa-gamepad"></i> Nikke</a>
134
+ <a href="#corrupted"><i class="fas fa-magic"></i> Corrupted</a>
135
+ <a href="#backgrounds"><i class="fas fa-image"></i> Backgrounds</a>
136
+ </div>
137
+ </li>
138
+ <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
139
+ <li class="has-submenu">
140
+ <a href="#">
141
+ <i class="fas fa-flask"></i> Examples
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="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
146
+ <a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
147
+ <a href="card.html"><i class="fas fa-square"></i> Cards</a>
148
+ <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
149
+ <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
150
+ </div>
151
+ </li>
152
+ <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
128
153
  </ul>
129
154
  </div>
130
155
  </nav>
@@ -631,6 +656,12 @@ const theme = {
631
656
  <!-- Nikke Components Section -->
632
657
  <section class="showcase-section" id="nikke">
633
658
  <h2><i class="fas fa-gamepad"></i> Nikke Components</h2>
659
+ <p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
660
+ Game-specific UI components for Nikke applications.
661
+ <a href="nikke-team-builder.html" class="link" style="font-weight: 600;">
662
+ <i class="fas fa-external-link-alt"></i> See Full Team Builder Example
663
+ </a>
664
+ </p>
634
665
 
635
666
  <h3>Element Badges</h3>
636
667
  <div class="demo-container">
@@ -904,7 +935,7 @@ const theme = {
904
935
  </section>
905
936
 
906
937
  <!-- Background Images Section -->
907
- <section class="showcase-section">
938
+ <section class="showcase-section" id="backgrounds">
908
939
  <h2><i class="fas fa-image"></i> Background Images</h2>
909
940
 
910
941
  <h3>Background Image with Overlay</h3>
@@ -917,11 +948,11 @@ const theme = {
917
948
 
918
949
  <h3>Background Overlay Utilities</h3>
919
950
  <div class="showcase-grid">
920
- <div class="bg-overlay bg-overlay-light" style="background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=400'); background-size: cover; padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
951
+ <div class="bg-overlay bg-overlay-light" style="background: linear-gradient(135deg, #3d2f4d 0%, #2a1a3e 100%); padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
921
952
  <h4 style="color: white;">Light Overlay</h4>
922
953
  <p style="color: rgba(255, 255, 255, 0.9);">Content with light background overlay</p>
923
954
  </div>
924
- <div class="bg-overlay bg-overlay-dark" style="background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?w=400'); background-size: cover; padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
955
+ <div class="bg-overlay bg-overlay-dark" style="background: linear-gradient(135deg, #3d2f4d 0%, #2a1a3e 100%); padding: var(--spacing-xl); border-radius: var(--radius-lg); min-height: 200px;">
925
956
  <h4 style="color: white;">Dark Overlay</h4>
926
957
  <p style="color: rgba(255, 255, 255, 0.9);">Content with dark background overlay</p>
927
958
  </div>
@@ -933,7 +964,7 @@ const theme = {
933
964
  <p><strong>Corrupted Theme</strong> v0.1.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
934
965
  <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
935
966
  <a href="../README.md" class="link">Documentation</a> •
936
- <a href="../docs/CUSTOMIZATION.md" class="link">Customization</a> •
967
+ <a href="../docs/COMPONENTS_REFERENCE.md#customization" class="link">Customization</a> •
937
968
  <a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
938
969
  </p>
939
970
  </footer>
package/examples/showcase.html CHANGED
@@ -130,15 +130,28 @@
130
130
  </head>
131
131
  <body>
132
132
  <!-- Navigation -->
133
+ <!-- Global Navigation -->
133
134
  <nav class="navbar">
134
135
  <div class="navbar-content">
135
- <a href="#" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
136
+ <a href="index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
136
137
  <ul class="navbar-links">
137
- <li><a href="#glass-components" class="active">Glass Components</a></li>
138
- <li><a href="#standard-components">Standard Components</a></li>
139
- <li><a href="#forms">Forms</a></li>
140
- <li><a href="#badges">Badges</a></li>
141
- <li><a href="#utilities">Utilities</a></li>
138
+ <li><a href="index.html"><i class="fas fa-home"></i> Home</a></li>
139
+ <li><a href="showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
140
+ <li><a href="extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
141
+ <li class="has-submenu">
142
+ <a href="#">
143
+ <i class="fas fa-flask"></i> Examples
144
+ <i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
145
+ </a>
146
+ <div class="submenu">
147
+ <a href="nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
148
+ <a href="button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
149
+ <a href="card.html"><i class="fas fa-square"></i> Cards</a>
150
+ <a href="form.html"><i class="fas fa-edit"></i> Forms</a>
151
+ <a href="layout.html"><i class="fas fa-columns"></i> Layouts</a>
152
+ </div>
153
+ </li>
154
+ <li><a href="../docs/COMPONENTS_REFERENCE.md"><i class="fas fa-book"></i> Docs</a></li>
142
155
  </ul>
143
156
  </div>
144
157
  </nav>
@@ -452,7 +465,7 @@ const theme = {
452
465
  <p><strong>Corrupted Theme</strong> v0.1.0 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
453
466
  <p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
454
467
  <a href="../README.md" class="link">Documentation</a> •
455
- <a href="../docs/CUSTOMIZATION.md" class="link">Customization</a> •
468
+ <a href="../docs/COMPONENTS_REFERENCE.md#customization" class="link">Customization</a> •
456
469
  <a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
457
470
  </p>
458
471
  </footer>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@whykusanagi/corrupted-theme",
3
- "version": "0.1.0",
3
+ "version": "0.1.2",
4
4
  "type": "module",
5
5
  "description": "A dark, glassmorphic design system with pink/purple accents. Perfect for creating modern, visually striking web applications.",
6
6
  "main": "src/css/theme.css",
@@ -16,7 +16,12 @@
16
16
  "./animations": "./src/css/animations.css",
17
17
  "./components": "./src/css/components.css",
18
18
  "./utilities": "./src/css/utilities.css",
19
- "./nikke-utilities": "./src/css/nikke-utilities.css"
19
+ "./nikke-utilities": "./src/css/nikke-utilities.css",
20
+ "./extensions": "./src/css/extensions.css",
21
+ "./gallery": "./src/lib/gallery.js",
22
+ "./countdown": "./src/lib/countdown-widget.js",
23
+ "./corrupted-text": "./src/lib/corrupted-text.js",
24
+ "./corruption-loading": "./src/lib/corruption-loading.js"
20
25
  },
21
26
  "files": [
22
27
  "src",
@@ -42,9 +47,11 @@
42
47
  "ui-framework",
43
48
  "styling",
44
49
  "css-variables",
45
- "celeste-widget",
46
- "chat-widget",
47
- "ai-chat"
50
+ "gallery",
51
+ "lightbox",
52
+ "countdown",
53
+ "social-links",
54
+ "link-in-bio"
48
55
  ],
49
56
  "author": "whykusanagi <contact@whykusanagi.xyz>",
50
57
  "license": "MIT",
package/src/css/components.css CHANGED
@@ -781,9 +781,91 @@ pre .code-inline {
781
781
  transform: translateY(-50%) translateX(0);
782
782
  }
783
783
 
784
- /* ========== NAVIGATION MENUS ========== */
784
+ /* ========== NAVIGATION ========== */
785
785
 
786
- /* Navbar - Already defined in theme.css, but adding explicit menu variants */
786
+ nav.navbar {
787
+ position: sticky;
788
+ top: 0;
789
+ z-index: var(--z-navbar);
790
+ background: rgba(10, 10, 10, 0.95);
791
+ border-bottom: 1px solid var(--border);
792
+ backdrop-filter: blur(15px);
793
+ padding: 0;
794
+ }
795
+
796
+ .navbar-content {
797
+ max-width: 1400px;
798
+ margin: 0 auto;
799
+ padding: 1rem 2rem;
800
+ display: flex;
801
+ justify-content: space-between;
802
+ align-items: center;
803
+ gap: 2rem;
804
+ }
805
+
806
+ .navbar-logo {
807
+ font-size: 1.25rem;
808
+ font-weight: 700;
809
+ color: var(--accent);
810
+ text-decoration: none;
811
+ transition: all var(--transition-normal);
812
+ display: flex;
813
+ align-items: center;
814
+ gap: 0.5rem;
815
+ min-width: fit-content;
816
+ }
817
+
818
+ .navbar-logo:hover {
819
+ color: var(--accent-light);
820
+ transform: translateY(-2px);
821
+ }
822
+
823
+ .navbar-links {
824
+ display: flex;
825
+ gap: 1.5rem;
826
+ list-style: none;
827
+ margin: 0;
828
+ padding: 0;
829
+ align-items: center;
830
+ flex-wrap: wrap;
831
+ }
832
+
833
+ .navbar-links a {
834
+ color: var(--text-secondary);
835
+ text-decoration: none;
836
+ font-size: 0.95rem;
837
+ font-weight: 500;
838
+ transition: all var(--transition-normal);
839
+ padding: 0.5rem 0;
840
+ position: relative;
841
+ }
842
+
843
+ .navbar-links a::after {
844
+ content: '';
845
+ position: absolute;
846
+ bottom: -2px;
847
+ left: 0;
848
+ width: 0;
849
+ height: 2px;
850
+ background: var(--accent);
851
+ transition: width var(--transition-normal);
852
+ }
853
+
854
+ .navbar-links a:hover {
855
+ color: var(--accent);
856
+ }
857
+
858
+ .navbar-links a:hover::after {
859
+ width: 100%;
860
+ }
861
+
862
+ .navbar-links a.active {
863
+ color: var(--accent);
864
+ }
865
+
866
+ .navbar-links a.active::after {
867
+ width: 100%;
868
+ }
787
869
 
788
870
  /* Mobile Menu Toggle */
789
871
  .navbar-toggle {
@@ -1389,6 +1471,23 @@ pre .code-inline {
1389
1471
  right: 0;
1390
1472
  }
1391
1473
 
1474
+ /* Navbar responsive */
1475
+ .navbar-content {
1476
+ flex-direction: column;
1477
+ gap: 1rem;
1478
+ padding: 1rem;
1479
+ }
1480
+
1481
+ .navbar-links {
1482
+ gap: 1rem;
1483
+ justify-content: center;
1484
+ width: 100%;
1485
+ }
1486
+
1487
+ .navbar-links a {
1488
+ font-size: 0.9rem;
1489
+ }
1490
+
1392
1491
  .navbar-toggle {
1393
1492
  display: block;
1394
1493
  }