@whykusanagi/corrupted-theme 0.1.1 → 0.1.3
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 +253 -0
- package/README.md +97 -7
- package/docs/CAPABILITIES.md +209 -0
- package/docs/CHARACTER_LEVEL_CORRUPTION.md +264 -0
- package/docs/COMPONENTS_REFERENCE.md +295 -8
- package/docs/CORRUPTION_PHRASES.md +529 -0
- package/docs/FUTURE_WORK.md +189 -0
- package/docs/IMPLEMENTATION_VALIDATION.md +401 -0
- package/docs/LLM_PROVIDERS.md +345 -0
- package/docs/PERSONALITY.md +128 -0
- package/docs/ROADMAP.md +266 -0
- package/docs/ROUTING.md +324 -0
- package/docs/STYLE_GUIDE.md +605 -0
- package/docs/brand/BRAND_OVERVIEW.md +413 -0
- package/docs/brand/COLOR_SYSTEM.md +583 -0
- package/docs/brand/DESIGN_TOKENS.md +1009 -0
- package/docs/brand/TRANSLATION_FAILURE_AESTHETIC.md +525 -0
- package/docs/brand/TYPOGRAPHY.md +624 -0
- package/docs/components/ANIMATION_GUIDELINES.md +901 -0
- package/docs/components/COMPONENT_LIBRARY.md +1061 -0
- package/docs/components/GLASSMORPHISM.md +602 -0
- package/docs/components/INTERACTIVE_STATES.md +766 -0
- package/docs/governance/CONTRIBUTION_GUIDELINES.md +593 -0
- package/docs/governance/DESIGN_SYSTEM_GOVERNANCE.md +451 -0
- package/docs/governance/VERSION_MANAGEMENT.md +447 -0
- package/docs/governance/VERSION_REFERENCES.md +229 -0
- package/docs/platforms/CLI_IMPLEMENTATION.md +1025 -0
- package/docs/platforms/COMPONENT_MAPPING.md +579 -0
- package/docs/platforms/NPM_PACKAGE.md +854 -0
- package/docs/platforms/WEB_IMPLEMENTATION.md +1221 -0
- package/docs/standards/ACCESSIBILITY.md +715 -0
- package/docs/standards/ANTI_PATTERNS.md +554 -0
- package/docs/standards/SPACING_SYSTEM.md +549 -0
- package/examples/assets/celeste-avatar.png +0 -0
- package/examples/button.html +22 -10
- package/examples/card.html +22 -9
- package/examples/extensions-showcase.html +716 -0
- package/examples/form.html +22 -9
- package/examples/index.html +619 -396
- package/examples/layout.html +22 -8
- package/examples/nikke-team-builder.html +23 -9
- package/examples/showcase-complete.html +884 -28
- package/examples/showcase.html +21 -8
- package/package.json +14 -5
- package/src/css/components.css +676 -0
- package/src/css/extensions.css +933 -0
- package/src/css/theme.css +6 -74
- package/src/css/typography.css +5 -0
- package/src/lib/character-corruption.js +563 -0
- package/src/lib/components.js +283 -0
- package/src/lib/countdown-widget.js +609 -0
- package/src/lib/gallery.js +481 -0
|
@@ -98,7 +98,7 @@
|
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
.bg-demo {
|
|
101
|
-
background
|
|
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="
|
|
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="
|
|
122
|
-
<li
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
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">
|
|
@@ -721,6 +752,202 @@ const theme = {
|
|
|
721
752
|
</div>
|
|
722
753
|
</section>
|
|
723
754
|
|
|
755
|
+
<!-- Animation Utilities Section -->
|
|
756
|
+
<section class="showcase-section" id="animations">
|
|
757
|
+
<h2><i class="fas fa-magic"></i> Animation Utilities</h2>
|
|
758
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-xl);">
|
|
759
|
+
Pre-built animation classes for common UI patterns. All animations respect <code>prefers-reduced-motion</code> for accessibility.
|
|
760
|
+
</p>
|
|
761
|
+
|
|
762
|
+
<h3>Fade Animations</h3>
|
|
763
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
764
|
+
<div class="glass-card fade-in">
|
|
765
|
+
<h4><code>.fade-in</code></h4>
|
|
766
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
767
|
+
Standard fade (0.5s)<br>
|
|
768
|
+
<small>Refresh page to see animation</small>
|
|
769
|
+
</p>
|
|
770
|
+
</div>
|
|
771
|
+
<div class="glass-card fade-in-fast" style="animation-delay: 0.2s;">
|
|
772
|
+
<h4><code>.fade-in-fast</code></h4>
|
|
773
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
774
|
+
Quick fade (0.3s)<br>
|
|
775
|
+
<small>For snappy UI transitions</small>
|
|
776
|
+
</p>
|
|
777
|
+
</div>
|
|
778
|
+
<div class="glass-card fade-in-slow" style="animation-delay: 0.4s;">
|
|
779
|
+
<h4><code>.fade-in-slow</code></h4>
|
|
780
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
781
|
+
Slow fade (1s)<br>
|
|
782
|
+
<small>For dramatic reveals</small>
|
|
783
|
+
</p>
|
|
784
|
+
</div>
|
|
785
|
+
</div>
|
|
786
|
+
|
|
787
|
+
<h3>Slide Animations</h3>
|
|
788
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
789
|
+
<div class="glass-card slide-in">
|
|
790
|
+
<h4><code>.slide-in</code></h4>
|
|
791
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
792
|
+
Slide from bottom with bounce<br>
|
|
793
|
+
<small>Perfect for modals</small>
|
|
794
|
+
</p>
|
|
795
|
+
</div>
|
|
796
|
+
<div class="glass-card slide-in-left" style="animation-delay: 0.2s;">
|
|
797
|
+
<h4><code>.slide-in-left</code></h4>
|
|
798
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
799
|
+
Slide from left with bounce<br>
|
|
800
|
+
<small>For sidebars</small>
|
|
801
|
+
</p>
|
|
802
|
+
</div>
|
|
803
|
+
<div class="glass-card slide-in-right" style="animation-delay: 0.4s;">
|
|
804
|
+
<h4><code>.slide-in-right</code></h4>
|
|
805
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
806
|
+
Slide from right with bounce<br>
|
|
807
|
+
<small>For notifications</small>
|
|
808
|
+
</p>
|
|
809
|
+
</div>
|
|
810
|
+
<div class="glass-card slide-in-slow" style="animation-delay: 0.6s;">
|
|
811
|
+
<h4><code>.slide-in-slow</code></h4>
|
|
812
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
813
|
+
Slow slide (1.2s)<br>
|
|
814
|
+
<small>Dramatic entrance</small>
|
|
815
|
+
</p>
|
|
816
|
+
</div>
|
|
817
|
+
</div>
|
|
818
|
+
|
|
819
|
+
<h3>Scale Animations</h3>
|
|
820
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
821
|
+
<div class="glass-card scale-in">
|
|
822
|
+
<h4><code>.scale-in</code></h4>
|
|
823
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
824
|
+
Pop in from 95% to 100%<br>
|
|
825
|
+
<small>Subtle attention grabber</small>
|
|
826
|
+
</p>
|
|
827
|
+
</div>
|
|
828
|
+
<div class="glass-card scale-up" style="animation-delay: 0.2s;">
|
|
829
|
+
<h4><code>.scale-up</code></h4>
|
|
830
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
831
|
+
Hover to scale to 105%<br>
|
|
832
|
+
<small>Try hovering this card!</small>
|
|
833
|
+
</p>
|
|
834
|
+
</div>
|
|
835
|
+
</div>
|
|
836
|
+
|
|
837
|
+
<h3>Pulse, Breathe & Float</h3>
|
|
838
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
839
|
+
<div class="glass-card">
|
|
840
|
+
<div class="pulse" style="display: inline-block; padding: var(--spacing-md); background: var(--glass-darker); border-radius: var(--radius-md);">
|
|
841
|
+
<i class="fas fa-bell" style="font-size: 2rem; color: var(--accent);"></i>
|
|
842
|
+
</div>
|
|
843
|
+
<h4><code>.pulse</code></h4>
|
|
844
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
845
|
+
Pulses opacity 1 ↔ 0.7 (2s loop)<br>
|
|
846
|
+
<small>For attention indicators</small>
|
|
847
|
+
</p>
|
|
848
|
+
</div>
|
|
849
|
+
<div class="glass-card">
|
|
850
|
+
<div class="breathe" style="display: inline-block; padding: var(--spacing-md); background: var(--glass-darker); border-radius: var(--radius-md);">
|
|
851
|
+
<i class="fas fa-heart" style="font-size: 2rem; color: #ef4444;"></i>
|
|
852
|
+
</div>
|
|
853
|
+
<h4><code>.breathe</code></h4>
|
|
854
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
855
|
+
Slower pulse 0.8 ↔ 1 (3s loop)<br>
|
|
856
|
+
<small>Subtle ambient effect</small>
|
|
857
|
+
</p>
|
|
858
|
+
</div>
|
|
859
|
+
<div class="glass-card">
|
|
860
|
+
<div class="float" style="display: inline-block; padding: var(--spacing-md); background: var(--glass-darker); border-radius: var(--radius-md);">
|
|
861
|
+
<i class="fas fa-rocket" style="font-size: 2rem; color: var(--accent);"></i>
|
|
862
|
+
</div>
|
|
863
|
+
<h4><code>.float</code></h4>
|
|
864
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
865
|
+
Floats up/down 10px (3s loop)<br>
|
|
866
|
+
<small>Smooth vertical motion</small>
|
|
867
|
+
</p>
|
|
868
|
+
</div>
|
|
869
|
+
</div>
|
|
870
|
+
|
|
871
|
+
<h3>Shimmer (Loading State)</h3>
|
|
872
|
+
<div class="demo-container" style="margin-bottom: var(--spacing-xl);">
|
|
873
|
+
<div class="shimmer" style="height: 200px; width: 100%; border-radius: var(--radius-lg); position: relative; overflow: hidden;">
|
|
874
|
+
<div style="position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--text-secondary);">
|
|
875
|
+
<code>.shimmer</code> - Animated loading state
|
|
876
|
+
</div>
|
|
877
|
+
</div>
|
|
878
|
+
</div>
|
|
879
|
+
|
|
880
|
+
<h3>Lift Effects (Hover)</h3>
|
|
881
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
882
|
+
<div class="glass-card lift transition-normal" style="cursor: pointer;">
|
|
883
|
+
<h4><code>.lift</code></h4>
|
|
884
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
885
|
+
Hover to lift 4px with shadow<br>
|
|
886
|
+
<small>Standard lift effect</small>
|
|
887
|
+
</p>
|
|
888
|
+
</div>
|
|
889
|
+
<div class="glass-card lift-sm transition-normal" style="cursor: pointer;">
|
|
890
|
+
<h4><code>.lift-sm</code></h4>
|
|
891
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
892
|
+
Hover to lift 2px (subtle)<br>
|
|
893
|
+
<small>Subtle hover feedback</small>
|
|
894
|
+
</p>
|
|
895
|
+
</div>
|
|
896
|
+
<div class="glass-card lift-lg transition-normal" style="cursor: pointer;">
|
|
897
|
+
<h4><code>.lift-lg</code></h4>
|
|
898
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem;">
|
|
899
|
+
Hover to lift 8px (dramatic)<br>
|
|
900
|
+
<small>Strong hover effect</small>
|
|
901
|
+
</p>
|
|
902
|
+
</div>
|
|
903
|
+
</div>
|
|
904
|
+
|
|
905
|
+
<h3>Transition Utilities</h3>
|
|
906
|
+
<div class="demo-container" style="flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-xl);">
|
|
907
|
+
<button class="btn secondary transition-fast" style="width: fit-content;">
|
|
908
|
+
<code>.transition-fast</code> (150ms) - Snappy UI
|
|
909
|
+
</button>
|
|
910
|
+
<button class="btn secondary transition-normal" style="width: fit-content;">
|
|
911
|
+
<code>.transition-normal</code> (300ms) - Default speed
|
|
912
|
+
</button>
|
|
913
|
+
<button class="btn secondary transition-slow" style="width: fit-content;">
|
|
914
|
+
<code>.transition-slow</code> (500ms) - Smooth & dramatic
|
|
915
|
+
</button>
|
|
916
|
+
</div>
|
|
917
|
+
|
|
918
|
+
<div class="code-example">
|
|
919
|
+
<!-- Fade animations -->
|
|
920
|
+
<div class="fade-in">Fades in on load</div>
|
|
921
|
+
<div class="fade-in-fast">Quick fade</div>
|
|
922
|
+
<div class="fade-in-slow">Slow fade</div>
|
|
923
|
+
|
|
924
|
+
<!-- Slide animations -->
|
|
925
|
+
<div class="slide-in">Slides from bottom</div>
|
|
926
|
+
<div class="slide-in-left">Slides from left</div>
|
|
927
|
+
<div class="slide-in-right">Slides from right</div>
|
|
928
|
+
|
|
929
|
+
<!-- Scale animations -->
|
|
930
|
+
<div class="scale-in">Pops in</div>
|
|
931
|
+
<div class="scale-up">Scales on hover</div>
|
|
932
|
+
|
|
933
|
+
<!-- Continuous animations -->
|
|
934
|
+
<div class="pulse">Pulses opacity</div>
|
|
935
|
+
<div class="breathe">Breathes slowly</div>
|
|
936
|
+
<div class="float">Floats up/down</div>
|
|
937
|
+
<div class="shimmer">Loading shimmer</div>
|
|
938
|
+
|
|
939
|
+
<!-- Hover effects (combine with transitions) -->
|
|
940
|
+
<div class="lift transition-normal">Lifts on hover</div>
|
|
941
|
+
<div class="lift-sm transition-fast">Subtle lift</div>
|
|
942
|
+
<div class="lift-lg transition-slow">Dramatic lift</div>
|
|
943
|
+
|
|
944
|
+
<!-- Transition utilities -->
|
|
945
|
+
<button class="btn transition-fast">Fast transitions</button>
|
|
946
|
+
<button class="btn transition-normal">Normal speed</button>
|
|
947
|
+
<button class="btn transition-slow">Slow & smooth</button>
|
|
948
|
+
</div>
|
|
949
|
+
</section>
|
|
950
|
+
|
|
724
951
|
<!-- Corrupted Animations & Text Highlighting Section -->
|
|
725
952
|
<section class="showcase-section" id="corrupted">
|
|
726
953
|
<h2><i class="fas fa-bug"></i> Corrupted Animations & Text Highlighting</h2>
|
|
@@ -903,8 +1130,545 @@ const theme = {
|
|
|
903
1130
|
</div>
|
|
904
1131
|
</section>
|
|
905
1132
|
|
|
1133
|
+
<!-- Character-Level Corruption (NEW in v0.1.3) -->
|
|
1134
|
+
<section class="showcase-section" id="character-corruption">
|
|
1135
|
+
<h2><i class="fas fa-language"></i> Character-Level Corruption <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.3</span></h2>
|
|
1136
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
1137
|
+
<strong>CLI Brand Parity:</strong> Matches Celeste CLI's translation-failure aesthetic. Japanese characters are mixed <strong>INTO</strong> English words at the character level (not word replacement).
|
|
1138
|
+
</p>
|
|
1139
|
+
|
|
1140
|
+
<h3>Dual Corruption Systems</h3>
|
|
1141
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-xl);">
|
|
1142
|
+
<div class="glass-card" style="padding: var(--spacing-lg);">
|
|
1143
|
+
<h4 style="color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
1144
|
+
<i class="fas fa-spinner"></i> Multilingual Cycling
|
|
1145
|
+
</h4>
|
|
1146
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md); font-size: 0.9rem;">
|
|
1147
|
+
<code>corrupted-text.js</code> (existing)
|
|
1148
|
+
</p>
|
|
1149
|
+
<p style="margin-bottom: var(--spacing-md); font-size: 0.95rem;">
|
|
1150
|
+
<strong>Use for:</strong> Loading screens, full-screen animations, dramatic effects
|
|
1151
|
+
</p>
|
|
1152
|
+
<p style="margin-bottom: var(--spacing-md); font-size: 0.95rem;">
|
|
1153
|
+
<strong>Behavior:</strong> Cycles through language variants (English → Romaji → Kanji)
|
|
1154
|
+
</p>
|
|
1155
|
+
<div style="text-align: center; padding: var(--spacing-lg); background: rgba(217, 79, 144, 0.05); border-radius: var(--radius-md);">
|
|
1156
|
+
<span class="corrupted-multilang"
|
|
1157
|
+
data-english="Loading"
|
|
1158
|
+
data-romaji="rōdo"
|
|
1159
|
+
data-katakana="ローディング">
|
|
1160
|
+
Loading
|
|
1161
|
+
</span>
|
|
1162
|
+
</div>
|
|
1163
|
+
</div>
|
|
1164
|
+
|
|
1165
|
+
<div class="glass-card" style="padding: var(--spacing-lg); border: 2px solid var(--accent);">
|
|
1166
|
+
<h4 style="color: var(--accent); margin-bottom: var(--spacing-md);">
|
|
1167
|
+
<i class="fas fa-text-height"></i> Character-Level Mixing <span class="badge success" style="font-size: 0.7rem;">NEW</span>
|
|
1168
|
+
</h4>
|
|
1169
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md); font-size: 0.9rem;">
|
|
1170
|
+
<code>character-corruption.js</code> (new)
|
|
1171
|
+
</p>
|
|
1172
|
+
<p style="margin-bottom: var(--spacing-md); font-size: 0.95rem;">
|
|
1173
|
+
<strong>Use for:</strong> Dashboard titles, section headers, UI labels (matches CLI)
|
|
1174
|
+
</p>
|
|
1175
|
+
<p style="margin-bottom: var(--spacing-md); font-size: 0.95rem;">
|
|
1176
|
+
<strong>Behavior:</strong> Mixes Japanese INTO English
|
|
1177
|
+
</p>
|
|
1178
|
+
<div style="text-align: center; padding: var(--spacing-lg); background: rgba(217, 79, 144, 0.05); border-radius: var(--radius-md);">
|
|
1179
|
+
<span class="auto-corrupt"
|
|
1180
|
+
data-text="Loading"
|
|
1181
|
+
data-intensity="0.35"
|
|
1182
|
+
data-interval="3000"
|
|
1183
|
+
style="font-size: 1.5rem; font-weight: 600;">
|
|
1184
|
+
Loading
|
|
1185
|
+
</span>
|
|
1186
|
+
</div>
|
|
1187
|
+
</div>
|
|
1188
|
+
</div>
|
|
1189
|
+
|
|
1190
|
+
<h3>Corruption Intensity Levels</h3>
|
|
1191
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-md);">
|
|
1192
|
+
Watch the text below change every 3 seconds to see the randomization effect:
|
|
1193
|
+
</p>
|
|
1194
|
+
|
|
1195
|
+
<div style="display: flex; flex-direction: column; gap: var(--spacing-md); margin-bottom: var(--spacing-xl);">
|
|
1196
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1197
|
+
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md);">
|
|
1198
|
+
<h3 class="auto-corrupt" data-text="USAGE ANALYTICS" data-intensity="0.15" data-interval="3000" style="margin: 0; flex: 1; min-width: 200px;">USAGE ANALYTICS</h3>
|
|
1199
|
+
<span class="badge">15% Minimal</span>
|
|
1200
|
+
</div>
|
|
1201
|
+
<p style="color: var(--text-secondary); margin-top: var(--spacing-sm); margin-bottom: 0; font-size: 0.9rem;">
|
|
1202
|
+
Decorative only, critical labels
|
|
1203
|
+
</p>
|
|
1204
|
+
</div>
|
|
1205
|
+
|
|
1206
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1207
|
+
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md);">
|
|
1208
|
+
<h3 class="auto-corrupt" data-text="USAGE ANALYTICS" data-intensity="0.25" data-interval="3000" style="margin: 0; flex: 1; min-width: 200px;">USAGE ANALYTICS</h3>
|
|
1209
|
+
<span class="badge primary">25% Low</span>
|
|
1210
|
+
</div>
|
|
1211
|
+
<p style="color: var(--text-secondary); margin-top: var(--spacing-sm); margin-bottom: 0; font-size: 0.9rem;">
|
|
1212
|
+
Section headers, readable UI
|
|
1213
|
+
</p>
|
|
1214
|
+
</div>
|
|
1215
|
+
|
|
1216
|
+
<div class="glass-card" style="padding: var(--spacing-md); border: 2px solid var(--accent);">
|
|
1217
|
+
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md);">
|
|
1218
|
+
<h3 class="auto-corrupt" data-text="USAGE ANALYTICS" data-intensity="0.35" data-interval="3000" style="margin: 0; flex: 1; min-width: 200px;">USAGE ANALYTICS</h3>
|
|
1219
|
+
<span class="badge primary">35% Medium ★ Recommended</span>
|
|
1220
|
+
</div>
|
|
1221
|
+
<p style="color: var(--text-secondary); margin-top: var(--spacing-sm); margin-bottom: 0; font-size: 0.9rem;">
|
|
1222
|
+
Dashboard titles, brand elements
|
|
1223
|
+
</p>
|
|
1224
|
+
</div>
|
|
1225
|
+
|
|
1226
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1227
|
+
<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--spacing-md);">
|
|
1228
|
+
<h3 class="auto-corrupt" data-text="USAGE ANALYTICS" data-intensity="0.45" data-interval="3000" style="margin: 0; flex: 1; min-width: 200px;">USAGE ANALYTICS</h3>
|
|
1229
|
+
<span class="badge warning">45% High (Max)</span>
|
|
1230
|
+
</div>
|
|
1231
|
+
<p style="color: var(--text-secondary); margin-top: var(--spacing-sm); margin-bottom: 0; font-size: 0.9rem;">
|
|
1232
|
+
Loading screens, dramatic effects (maximum readable)
|
|
1233
|
+
</p>
|
|
1234
|
+
</div>
|
|
1235
|
+
</div>
|
|
1236
|
+
|
|
1237
|
+
<h3>Interactive Demo</h3>
|
|
1238
|
+
<div class="glass-card" style="padding: var(--spacing-xl); text-align: center;">
|
|
1239
|
+
<h2 id="live-corruption-demo" style="font-size: clamp(1.5rem, 5vw, 3rem); margin-bottom: var(--spacing-md);">
|
|
1240
|
+
CELESTE AI DASHBOARD
|
|
1241
|
+
</h2>
|
|
1242
|
+
<p id="demo-output" style="color: var(--text-secondary); margin-bottom: var(--spacing-lg); font-size: 0.9rem;">
|
|
1243
|
+
Click a button to see corruption at different intensities
|
|
1244
|
+
</p>
|
|
1245
|
+
|
|
1246
|
+
<div style="display: flex; gap: var(--spacing-sm); justify-content: center; flex-wrap: wrap;">
|
|
1247
|
+
<button class="btn sm secondary" onclick="setDemoIntensity(0.15)">15%</button>
|
|
1248
|
+
<button class="btn sm secondary" onclick="setDemoIntensity(0.25)">25%</button>
|
|
1249
|
+
<button class="btn sm" onclick="setDemoIntensity(0.35)">35% ★</button>
|
|
1250
|
+
<button class="btn sm secondary" onclick="setDemoIntensity(0.45)">45%</button>
|
|
1251
|
+
<button class="btn sm ghost" onclick="setDemoIntensity(0)">Reset</button>
|
|
1252
|
+
</div>
|
|
1253
|
+
</div>
|
|
1254
|
+
|
|
1255
|
+
<h3 style="margin-top: var(--spacing-xl);">❌ Anti-Patterns (What NOT to Do)</h3>
|
|
1256
|
+
<div class="showcase-grid" style="margin-bottom: var(--spacing-lg);">
|
|
1257
|
+
<div class="glass-card" style="padding: var(--spacing-md); border: 2px solid #ef4444;">
|
|
1258
|
+
<h5 style="color: #ef4444; margin-bottom: var(--spacing-sm);">
|
|
1259
|
+
<i class="fas fa-ban"></i> Leet Speak (BANNED)
|
|
1260
|
+
</h5>
|
|
1261
|
+
<code style="font-size: 1.1rem; display: block; margin-bottom: var(--spacing-sm);">US4G3 4N4LYT1CS</code>
|
|
1262
|
+
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">
|
|
1263
|
+
Number substitution (0,1,3,4,5,7) violates brand identity
|
|
1264
|
+
</p>
|
|
1265
|
+
</div>
|
|
1266
|
+
|
|
1267
|
+
<div class="glass-card" style="padding: var(--spacing-md); border: 2px solid #ef4444;">
|
|
1268
|
+
<h5 style="color: #ef4444; margin-bottom: var(--spacing-sm);">
|
|
1269
|
+
<i class="fas fa-ban"></i> Full Word Replacement
|
|
1270
|
+
</h5>
|
|
1271
|
+
<code style="font-size: 1.1rem; display: block; margin-bottom: var(--spacing-sm);">使用 統計</code>
|
|
1272
|
+
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">
|
|
1273
|
+
Complete translation is NOT corruption
|
|
1274
|
+
</p>
|
|
1275
|
+
</div>
|
|
1276
|
+
|
|
1277
|
+
<div class="glass-card" style="padding: var(--spacing-md); border: 2px solid #ef4444;">
|
|
1278
|
+
<h5 style="color: #ef4444; margin-bottom: var(--spacing-sm);">
|
|
1279
|
+
<i class="fas fa-ban"></i> Over-Corruption (>45%)
|
|
1280
|
+
</h5>
|
|
1281
|
+
<code style="font-size: 1.1rem; display: block; margin-bottom: var(--spacing-sm);">壊統使計深分析監</code>
|
|
1282
|
+
<p style="color: var(--text-secondary); margin: 0; font-size: 0.9rem;">
|
|
1283
|
+
Unreadable - violates accessibility (WCAG)
|
|
1284
|
+
</p>
|
|
1285
|
+
</div>
|
|
1286
|
+
</div>
|
|
1287
|
+
|
|
1288
|
+
<h3>Implementation Example</h3>
|
|
1289
|
+
<div class="code-example">
|
|
1290
|
+
<!-- Method 1: Auto-corruption with data attributes -->
|
|
1291
|
+
<h1 class="auto-corrupt"
|
|
1292
|
+
data-text="CELESTE DASHBOARD"
|
|
1293
|
+
data-intensity="0.35"
|
|
1294
|
+
data-interval="3000">
|
|
1295
|
+
CELESTE DASHBOARD
|
|
1296
|
+
</h1>
|
|
1297
|
+
|
|
1298
|
+
<script type="module">
|
|
1299
|
+
import { initAutoCorruption } from './character-corruption.js';
|
|
1300
|
+
initAutoCorruption();
|
|
1301
|
+
</script>
|
|
1302
|
+
|
|
1303
|
+
<!-- Method 2: Manual JavaScript -->
|
|
1304
|
+
<script type="module">
|
|
1305
|
+
import { corruptTextJapanese, INTENSITY } from './character-corruption.js';
|
|
1306
|
+
|
|
1307
|
+
const title = document.getElementById('title');
|
|
1308
|
+
setInterval(() => {
|
|
1309
|
+
title.textContent = corruptTextJapanese('USAGE ANALYTICS', INTENSITY.MEDIUM);
|
|
1310
|
+
}, 3000);
|
|
1311
|
+
</script>
|
|
1312
|
+
</div>
|
|
1313
|
+
</section>
|
|
1314
|
+
|
|
1315
|
+
<!-- New Bootstrap Components (v0.1.3) -->
|
|
1316
|
+
<section class="showcase-section" id="new-components">
|
|
1317
|
+
<h2><i class="fas fa-plus-circle"></i> New Bootstrap Components <span class="badge success" style="margin-left: var(--spacing-sm);">NEW v0.1.3</span></h2>
|
|
1318
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-lg);">
|
|
1319
|
+
<strong>1:1 Bootstrap Parity:</strong> 25+ new components added for complete coverage. Build sites without writing custom CSS!
|
|
1320
|
+
</p>
|
|
1321
|
+
|
|
1322
|
+
<!-- Accordion -->
|
|
1323
|
+
<h3><i class="fas fa-chevron-down"></i> Accordion / Collapse</h3>
|
|
1324
|
+
<div style="max-width: 800px; margin-bottom: var(--spacing-xl);">
|
|
1325
|
+
<div class="accordion">
|
|
1326
|
+
<div class="accordion-item active">
|
|
1327
|
+
<div class="accordion-header">What is the Corrupted Theme?</div>
|
|
1328
|
+
<div class="accordion-body">
|
|
1329
|
+
<p>Corrupted Theme is a production-ready glassmorphic design system with 65+ Bootstrap-equivalent components. It features a translation-failure aesthetic with Japanese character corruption, perfect for modern web applications.</p>
|
|
1330
|
+
</div>
|
|
1331
|
+
</div>
|
|
1332
|
+
<div class="accordion-item">
|
|
1333
|
+
<div class="accordion-header">How do I install it?</div>
|
|
1334
|
+
<div class="accordion-body">
|
|
1335
|
+
<p>Install via npm: <code>npm install @whykusanagi/corrupted-theme</code></p>
|
|
1336
|
+
<p>Then import the CSS: <code>import '@whykusanagi/corrupted-theme';</code></p>
|
|
1337
|
+
</div>
|
|
1338
|
+
</div>
|
|
1339
|
+
<div class="accordion-item">
|
|
1340
|
+
<div class="accordion-header">Is it accessible?</div>
|
|
1341
|
+
<div class="accordion-body">
|
|
1342
|
+
<p>Yes! All components meet WCAG AA standards with proper color contrast, keyboard navigation, and screen reader support. Corruption intensity is capped at 45% to maintain readability.</p>
|
|
1343
|
+
</div>
|
|
1344
|
+
</div>
|
|
1345
|
+
</div>
|
|
1346
|
+
|
|
1347
|
+
<div class="code-example" style="margin-top: var(--spacing-md);">
|
|
1348
|
+
<div class="accordion">
|
|
1349
|
+
<div class="accordion-item">
|
|
1350
|
+
<div class="accordion-header">Click to expand</div>
|
|
1351
|
+
<div class="accordion-body">
|
|
1352
|
+
<p>Content goes here</p>
|
|
1353
|
+
</div>
|
|
1354
|
+
</div>
|
|
1355
|
+
</div>
|
|
1356
|
+
|
|
1357
|
+
<script type="module">
|
|
1358
|
+
import { initAccordions } from './components.js';
|
|
1359
|
+
initAccordions(); // Auto-initializes on load
|
|
1360
|
+
</script>
|
|
1361
|
+
</div>
|
|
1362
|
+
</div>
|
|
1363
|
+
|
|
1364
|
+
<!-- Toast Notifications -->
|
|
1365
|
+
<h3><i class="fas fa-bell"></i> Toast Notifications</h3>
|
|
1366
|
+
<div style="margin-bottom: var(--spacing-xl);">
|
|
1367
|
+
<div class="demo-container">
|
|
1368
|
+
<button class="btn" onclick="showToastDemo('success')">
|
|
1369
|
+
<i class="fas fa-check"></i> Success Toast
|
|
1370
|
+
</button>
|
|
1371
|
+
<button class="btn secondary" onclick="showToastDemo('warning')">
|
|
1372
|
+
<i class="fas fa-exclamation-triangle"></i> Warning Toast
|
|
1373
|
+
</button>
|
|
1374
|
+
<button class="btn secondary" onclick="showToastDemo('error')">
|
|
1375
|
+
<i class="fas fa-times"></i> Error Toast
|
|
1376
|
+
</button>
|
|
1377
|
+
<button class="btn secondary" onclick="showToastDemo('info')">
|
|
1378
|
+
<i class="fas fa-info-circle"></i> Info Toast
|
|
1379
|
+
</button>
|
|
1380
|
+
</div>
|
|
1381
|
+
|
|
1382
|
+
<div class="code-example" style="margin-top: var(--spacing-md);">
|
|
1383
|
+
<script type="module">
|
|
1384
|
+
import { toast } from './components.js';
|
|
1385
|
+
|
|
1386
|
+
// Success notification
|
|
1387
|
+
toast.success('Data saved successfully!', 'Success', 5000);
|
|
1388
|
+
|
|
1389
|
+
// Warning notification
|
|
1390
|
+
toast.warning('Please review your input', 'Warning', 5000);
|
|
1391
|
+
|
|
1392
|
+
// Error notification
|
|
1393
|
+
toast.error('Failed to connect to server', 'Error', 7000);
|
|
1394
|
+
|
|
1395
|
+
// Info notification (no title)
|
|
1396
|
+
toast.info('New features available', '', 5000);
|
|
1397
|
+
</script>
|
|
1398
|
+
</div>
|
|
1399
|
+
</div>
|
|
1400
|
+
|
|
1401
|
+
<!-- Button Groups -->
|
|
1402
|
+
<h3><i class="fas fa-object-group"></i> Button Groups</h3>
|
|
1403
|
+
<div style="margin-bottom: var(--spacing-xl);">
|
|
1404
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1405
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Horizontal button group:</p>
|
|
1406
|
+
<div class="btn-group">
|
|
1407
|
+
<button class="btn secondary active">Left</button>
|
|
1408
|
+
<button class="btn secondary">Middle</button>
|
|
1409
|
+
<button class="btn secondary">Right</button>
|
|
1410
|
+
</div>
|
|
1411
|
+
</div>
|
|
1412
|
+
|
|
1413
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1414
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Vertical button group:</p>
|
|
1415
|
+
<div class="btn-group-vertical">
|
|
1416
|
+
<button class="btn secondary">Top</button>
|
|
1417
|
+
<button class="btn secondary active">Middle</button>
|
|
1418
|
+
<button class="btn secondary">Bottom</button>
|
|
1419
|
+
</div>
|
|
1420
|
+
</div>
|
|
1421
|
+
|
|
1422
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1423
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Button toolbar:</p>
|
|
1424
|
+
<div class="btn-toolbar">
|
|
1425
|
+
<div class="btn-group">
|
|
1426
|
+
<button class="btn secondary"><i class="fas fa-bold"></i></button>
|
|
1427
|
+
<button class="btn secondary"><i class="fas fa-italic"></i></button>
|
|
1428
|
+
<button class="btn secondary"><i class="fas fa-underline"></i></button>
|
|
1429
|
+
</div>
|
|
1430
|
+
<div class="btn-group">
|
|
1431
|
+
<button class="btn secondary"><i class="fas fa-align-left"></i></button>
|
|
1432
|
+
<button class="btn secondary"><i class="fas fa-align-center"></i></button>
|
|
1433
|
+
<button class="btn secondary"><i class="fas fa-align-right"></i></button>
|
|
1434
|
+
</div>
|
|
1435
|
+
</div>
|
|
1436
|
+
</div>
|
|
1437
|
+
|
|
1438
|
+
<div class="code-example">
|
|
1439
|
+
<!-- Horizontal -->
|
|
1440
|
+
<div class="btn-group">
|
|
1441
|
+
<button class="btn secondary active">Left</button>
|
|
1442
|
+
<button class="btn secondary">Middle</button>
|
|
1443
|
+
<button class="btn secondary">Right</button>
|
|
1444
|
+
</div>
|
|
1445
|
+
|
|
1446
|
+
<!-- Vertical -->
|
|
1447
|
+
<div class="btn-group-vertical">
|
|
1448
|
+
<button class="btn secondary">Top</button>
|
|
1449
|
+
<button class="btn secondary">Bottom</button>
|
|
1450
|
+
</div>
|
|
1451
|
+
</div>
|
|
1452
|
+
</div>
|
|
1453
|
+
|
|
1454
|
+
<!-- Input Groups -->
|
|
1455
|
+
<h3><i class="fas fa-search"></i> Input Groups</h3>
|
|
1456
|
+
<div style="max-width: 600px; margin-bottom: var(--spacing-xl);">
|
|
1457
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1458
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Search with prepend text:</p>
|
|
1459
|
+
<div class="input-group">
|
|
1460
|
+
<div class="input-group-prepend">
|
|
1461
|
+
<span class="input-group-text"><i class="fas fa-search"></i></span>
|
|
1462
|
+
</div>
|
|
1463
|
+
<input type="text" placeholder="Search...">
|
|
1464
|
+
</div>
|
|
1465
|
+
</div>
|
|
1466
|
+
|
|
1467
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1468
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Input with append button:</p>
|
|
1469
|
+
<div class="input-group">
|
|
1470
|
+
<input type="text" placeholder="Enter email">
|
|
1471
|
+
<div class="input-group-append">
|
|
1472
|
+
<button class="btn">Subscribe</button>
|
|
1473
|
+
</div>
|
|
1474
|
+
</div>
|
|
1475
|
+
</div>
|
|
1476
|
+
|
|
1477
|
+
<div style="margin-bottom: var(--spacing-md);">
|
|
1478
|
+
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-sm); font-size: 0.9rem;">Both prepend and append:</p>
|
|
1479
|
+
<div class="input-group">
|
|
1480
|
+
<div class="input-group-prepend">
|
|
1481
|
+
<span class="input-group-text">$</span>
|
|
1482
|
+
</div>
|
|
1483
|
+
<input type="number" placeholder="0.00">
|
|
1484
|
+
<div class="input-group-append">
|
|
1485
|
+
<span class="input-group-text">.00</span>
|
|
1486
|
+
</div>
|
|
1487
|
+
</div>
|
|
1488
|
+
</div>
|
|
1489
|
+
|
|
1490
|
+
<div class="code-example">
|
|
1491
|
+
<div class="input-group">
|
|
1492
|
+
<div class="input-group-prepend">
|
|
1493
|
+
<span class="input-group-text">@</span>
|
|
1494
|
+
</div>
|
|
1495
|
+
<input type="text" placeholder="Username">
|
|
1496
|
+
</div>
|
|
1497
|
+
</div>
|
|
1498
|
+
</div>
|
|
1499
|
+
|
|
1500
|
+
<!-- Form Enhancements -->
|
|
1501
|
+
<h3><i class="fas fa-check-square"></i> Form Enhancements</h3>
|
|
1502
|
+
<div style="max-width: 600px; margin-bottom: var(--spacing-xl);">
|
|
1503
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1504
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Custom Checkboxes & Radios</h4>
|
|
1505
|
+
|
|
1506
|
+
<div class="form-check">
|
|
1507
|
+
<input type="checkbox" class="form-check-input" id="check1" checked>
|
|
1508
|
+
<label class="form-check-label" for="check1">Enable notifications</label>
|
|
1509
|
+
</div>
|
|
1510
|
+
<div class="form-check">
|
|
1511
|
+
<input type="checkbox" class="form-check-input" id="check2">
|
|
1512
|
+
<label class="form-check-label" for="check2">Auto-save drafts</label>
|
|
1513
|
+
</div>
|
|
1514
|
+
<div class="form-check">
|
|
1515
|
+
<input type="checkbox" class="form-check-input" id="check3" disabled>
|
|
1516
|
+
<label class="form-check-label" for="check3">Disabled option</label>
|
|
1517
|
+
</div>
|
|
1518
|
+
|
|
1519
|
+
<div style="margin-top: var(--spacing-md); padding-top: var(--spacing-md); border-top: 1px solid var(--border);"></div>
|
|
1520
|
+
|
|
1521
|
+
<div class="form-check">
|
|
1522
|
+
<input type="radio" class="form-check-input" id="radio1" name="radio-group" checked>
|
|
1523
|
+
<label class="form-check-label" for="radio1">Option 1</label>
|
|
1524
|
+
</div>
|
|
1525
|
+
<div class="form-check">
|
|
1526
|
+
<input type="radio" class="form-check-input" id="radio2" name="radio-group">
|
|
1527
|
+
<label class="form-check-label" for="radio2">Option 2</label>
|
|
1528
|
+
</div>
|
|
1529
|
+
</div>
|
|
1530
|
+
|
|
1531
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1532
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Toggle Switches</h4>
|
|
1533
|
+
|
|
1534
|
+
<div class="form-switch">
|
|
1535
|
+
<input type="checkbox" class="form-switch-input" id="switch1" checked>
|
|
1536
|
+
<label class="form-switch-label" for="switch1">Dark mode</label>
|
|
1537
|
+
</div>
|
|
1538
|
+
<div class="form-switch">
|
|
1539
|
+
<input type="checkbox" class="form-switch-input" id="switch2">
|
|
1540
|
+
<label class="form-switch-label" for="switch2">Auto-play videos</label>
|
|
1541
|
+
</div>
|
|
1542
|
+
<div class="form-switch">
|
|
1543
|
+
<input type="checkbox" class="form-switch-input" id="switch3" disabled>
|
|
1544
|
+
<label class="form-switch-label" for="switch3">Disabled switch</label>
|
|
1545
|
+
</div>
|
|
1546
|
+
</div>
|
|
1547
|
+
|
|
1548
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1549
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Range Slider</h4>
|
|
1550
|
+
<input type="range" class="form-range" min="0" max="100" value="50">
|
|
1551
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--spacing-sm);">
|
|
1552
|
+
Drag the slider to adjust value
|
|
1553
|
+
</p>
|
|
1554
|
+
</div>
|
|
1555
|
+
|
|
1556
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1557
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Custom Select</h4>
|
|
1558
|
+
<select class="form-select">
|
|
1559
|
+
<option>Select an option</option>
|
|
1560
|
+
<option>Option 1</option>
|
|
1561
|
+
<option>Option 2</option>
|
|
1562
|
+
<option>Option 3</option>
|
|
1563
|
+
</select>
|
|
1564
|
+
</div>
|
|
1565
|
+
|
|
1566
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1567
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Floating Labels</h4>
|
|
1568
|
+
<div class="form-floating" style="margin-bottom: var(--spacing-md);">
|
|
1569
|
+
<input type="text" id="float-input" placeholder=" ">
|
|
1570
|
+
<label for="float-input">Email address</label>
|
|
1571
|
+
</div>
|
|
1572
|
+
<div class="form-floating">
|
|
1573
|
+
<textarea id="float-textarea" placeholder=" " rows="3"></textarea>
|
|
1574
|
+
<label for="float-textarea">Message</label>
|
|
1575
|
+
</div>
|
|
1576
|
+
</div>
|
|
1577
|
+
|
|
1578
|
+
<div style="margin-bottom: var(--spacing-lg);">
|
|
1579
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-md);">Custom File Upload</h4>
|
|
1580
|
+
<div class="form-file">
|
|
1581
|
+
<input type="file" id="file-input">
|
|
1582
|
+
<label for="file-input" class="form-file-label">
|
|
1583
|
+
<i class="fas fa-upload"></i> Choose file
|
|
1584
|
+
</label>
|
|
1585
|
+
</div>
|
|
1586
|
+
</div>
|
|
1587
|
+
|
|
1588
|
+
<div class="code-example">
|
|
1589
|
+
<!-- Checkbox -->
|
|
1590
|
+
<div class="form-check">
|
|
1591
|
+
<input type="checkbox" class="form-check-input" id="check1">
|
|
1592
|
+
<label class="form-check-label" for="check1">Label</label>
|
|
1593
|
+
</div>
|
|
1594
|
+
|
|
1595
|
+
<!-- Toggle Switch -->
|
|
1596
|
+
<div class="form-switch">
|
|
1597
|
+
<input type="checkbox" class="form-switch-input" id="switch1">
|
|
1598
|
+
<label class="form-switch-label" for="switch1">Dark mode</label>
|
|
1599
|
+
</div>
|
|
1600
|
+
|
|
1601
|
+
<!-- Range Slider -->
|
|
1602
|
+
<input type="range" class="form-range" min="0" max="100" value="50">
|
|
1603
|
+
|
|
1604
|
+
<!-- Floating Label -->
|
|
1605
|
+
<div class="form-floating">
|
|
1606
|
+
<input type="text" id="float-input" placeholder=" ">
|
|
1607
|
+
<label for="float-input">Email</label>
|
|
1608
|
+
</div>
|
|
1609
|
+
</div>
|
|
1610
|
+
</div>
|
|
1611
|
+
|
|
1612
|
+
<!-- Utility Classes -->
|
|
1613
|
+
<h3><i class="fas fa-tools"></i> Utility Classes</h3>
|
|
1614
|
+
<div style="margin-bottom: var(--spacing-xl);">
|
|
1615
|
+
<div class="showcase-grid">
|
|
1616
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1617
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-sm);">Close Button</h4>
|
|
1618
|
+
<button class="btn-close"></button>
|
|
1619
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--spacing-sm);">
|
|
1620
|
+
Standardized × close button
|
|
1621
|
+
</p>
|
|
1622
|
+
</div>
|
|
1623
|
+
|
|
1624
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1625
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-sm);">Text Truncate</h4>
|
|
1626
|
+
<p class="text-truncate" style="max-width: 200px;">
|
|
1627
|
+
This is a very long text that will be truncated with an ellipsis
|
|
1628
|
+
</p>
|
|
1629
|
+
</div>
|
|
1630
|
+
|
|
1631
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1632
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-sm);">Aspect Ratios</h4>
|
|
1633
|
+
<div class="ratio ratio-16x9" style="background: rgba(217, 79, 144, 0.2); border-radius: var(--radius-md);">
|
|
1634
|
+
<div style="display: flex; align-items: center; justify-content: center;">
|
|
1635
|
+
16:9 Ratio
|
|
1636
|
+
</div>
|
|
1637
|
+
</div>
|
|
1638
|
+
</div>
|
|
1639
|
+
|
|
1640
|
+
<div class="glass-card" style="padding: var(--spacing-md);">
|
|
1641
|
+
<h4 style="font-size: 1rem; margin-bottom: var(--spacing-sm);">Screen Reader Only</h4>
|
|
1642
|
+
<p>
|
|
1643
|
+
<span class="visually-hidden">This text is only for screen readers</span>
|
|
1644
|
+
Visible text
|
|
1645
|
+
</p>
|
|
1646
|
+
<p style="color: var(--text-secondary); font-size: 0.9rem; margin-top: var(--spacing-sm);">
|
|
1647
|
+
WCAG AA compliant
|
|
1648
|
+
</p>
|
|
1649
|
+
</div>
|
|
1650
|
+
</div>
|
|
1651
|
+
|
|
1652
|
+
<div class="code-example" style="margin-top: var(--spacing-md);">
|
|
1653
|
+
<!-- Close button -->
|
|
1654
|
+
<button class="btn-close"></button>
|
|
1655
|
+
|
|
1656
|
+
<!-- Text truncate -->
|
|
1657
|
+
<p class="text-truncate">Long text...</p>
|
|
1658
|
+
|
|
1659
|
+
<!-- Aspect ratio containers -->
|
|
1660
|
+
<div class="ratio ratio-16x9">
|
|
1661
|
+
<img src="image.jpg" alt="...">
|
|
1662
|
+
</div>
|
|
1663
|
+
|
|
1664
|
+
<!-- Screen reader only -->
|
|
1665
|
+
<span class="visually-hidden">For screen readers</span>
|
|
1666
|
+
</div>
|
|
1667
|
+
</div>
|
|
1668
|
+
</section>
|
|
1669
|
+
|
|
906
1670
|
<!-- Background Images Section -->
|
|
907
|
-
<section class="showcase-section">
|
|
1671
|
+
<section class="showcase-section" id="backgrounds">
|
|
908
1672
|
<h2><i class="fas fa-image"></i> Background Images</h2>
|
|
909
1673
|
|
|
910
1674
|
<h3>Background Image with Overlay</h3>
|
|
@@ -917,11 +1681,11 @@ const theme = {
|
|
|
917
1681
|
|
|
918
1682
|
<h3>Background Overlay Utilities</h3>
|
|
919
1683
|
<div class="showcase-grid">
|
|
920
|
-
<div class="bg-overlay bg-overlay-light" style="background
|
|
1684
|
+
<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
1685
|
<h4 style="color: white;">Light Overlay</h4>
|
|
922
1686
|
<p style="color: rgba(255, 255, 255, 0.9);">Content with light background overlay</p>
|
|
923
1687
|
</div>
|
|
924
|
-
<div class="bg-overlay bg-overlay-dark" style="background
|
|
1688
|
+
<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
1689
|
<h4 style="color: white;">Dark Overlay</h4>
|
|
926
1690
|
<p style="color: rgba(255, 255, 255, 0.9);">Content with dark background overlay</p>
|
|
927
1691
|
</div>
|
|
@@ -930,34 +1694,25 @@ const theme = {
|
|
|
930
1694
|
|
|
931
1695
|
<!-- Footer -->
|
|
932
1696
|
<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);">
|
|
933
|
-
<p><strong>Corrupted Theme</strong> v0.1.
|
|
1697
|
+
<p><strong>Corrupted Theme</strong> v0.1.3 • Built with <i class="fas fa-heart" style="color: var(--accent);"></i> by whykusanagi</p>
|
|
934
1698
|
<p style="font-size: 0.875rem; margin-top: var(--spacing-md);">
|
|
935
1699
|
<a href="../README.md" class="link">Documentation</a> •
|
|
936
|
-
<a href="../docs/
|
|
1700
|
+
<a href="../docs/COMPONENTS_REFERENCE.md#customization" class="link">Customization</a> •
|
|
937
1701
|
<a href="https://github.com/whykusanagi/corrupted-theme" class="link">GitHub</a>
|
|
938
1702
|
</p>
|
|
939
1703
|
</footer>
|
|
940
1704
|
</div>
|
|
941
1705
|
|
|
942
|
-
<script>
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
"頭...溶けていく...",
|
|
946
|
-
"ずっと...してほしい... ♥",
|
|
947
|
-
"壊れちゃう...ああ...もうダメ...",
|
|
948
|
-
"許して...もう戻れない...",
|
|
949
|
-
"私...アビスの一部に...",
|
|
950
|
-
"もう逃げない...もうダメ...",
|
|
951
|
-
"好きにして...お願い...",
|
|
952
|
-
"ああ...これが本当の私...",
|
|
953
|
-
"ここは...天使の地獄..."
|
|
954
|
-
];
|
|
1706
|
+
<script type="module">
|
|
1707
|
+
// Import official corruption phrases from character-corruption.js
|
|
1708
|
+
import { PERSONALITY_PHRASES, getRandomPhrase } from '../src/lib/character-corruption.js';
|
|
955
1709
|
|
|
956
1710
|
function initGlitchKanji() {
|
|
957
1711
|
const glitchElements = document.querySelectorAll('.glitch-kanji');
|
|
958
1712
|
glitchElements.forEach(el => {
|
|
959
1713
|
const setPhrase = () => {
|
|
960
|
-
|
|
1714
|
+
// Use official personality phrases (Japanese kanji)
|
|
1715
|
+
const phrase = getRandomPhrase('personality', 'japanese');
|
|
961
1716
|
el.setAttribute('data-jp', phrase);
|
|
962
1717
|
};
|
|
963
1718
|
setPhrase();
|
|
@@ -965,6 +1720,16 @@ const theme = {
|
|
|
965
1720
|
});
|
|
966
1721
|
}
|
|
967
1722
|
|
|
1723
|
+
// Initialize on DOM ready
|
|
1724
|
+
if (document.readyState === 'loading') {
|
|
1725
|
+
document.addEventListener('DOMContentLoaded', initGlitchKanji);
|
|
1726
|
+
} else {
|
|
1727
|
+
initGlitchKanji();
|
|
1728
|
+
}
|
|
1729
|
+
</script>
|
|
1730
|
+
|
|
1731
|
+
<script>
|
|
1732
|
+
|
|
968
1733
|
// Modal functions
|
|
969
1734
|
function openModal(id) {
|
|
970
1735
|
document.getElementById(id).classList.add('active');
|
|
@@ -1066,6 +1831,97 @@ const theme = {
|
|
|
1066
1831
|
|
|
1067
1832
|
document.addEventListener('DOMContentLoaded', initGlitchKanji);
|
|
1068
1833
|
</script>
|
|
1834
|
+
|
|
1835
|
+
<!-- NEW v0.1.3: Character Corruption & Components -->
|
|
1836
|
+
<script type="module">
|
|
1837
|
+
// Import character corruption module
|
|
1838
|
+
import { corruptTextJapanese, INTENSITY, initAutoCorruption } from '../src/lib/character-corruption.js';
|
|
1839
|
+
import { toast, initAccordions } from '../src/lib/components.js';
|
|
1840
|
+
|
|
1841
|
+
// Initialize auto-corruption for all .auto-corrupt elements
|
|
1842
|
+
initAutoCorruption();
|
|
1843
|
+
|
|
1844
|
+
// Initialize accordions
|
|
1845
|
+
initAccordions();
|
|
1846
|
+
|
|
1847
|
+
// Interactive corruption demo
|
|
1848
|
+
let currentIntensity = 0;
|
|
1849
|
+
let demoInterval = null;
|
|
1850
|
+
const demoElement = document.getElementById('live-corruption-demo');
|
|
1851
|
+
const demoOutput = document.getElementById('demo-output');
|
|
1852
|
+
const originalText = 'CELESTE AI DASHBOARD';
|
|
1853
|
+
|
|
1854
|
+
window.setDemoIntensity = function(intensity) {
|
|
1855
|
+
currentIntensity = intensity;
|
|
1856
|
+
|
|
1857
|
+
// Clear existing interval
|
|
1858
|
+
if (demoInterval) {
|
|
1859
|
+
clearInterval(demoInterval);
|
|
1860
|
+
demoInterval = null;
|
|
1861
|
+
}
|
|
1862
|
+
|
|
1863
|
+
if (intensity === 0) {
|
|
1864
|
+
demoElement.textContent = originalText;
|
|
1865
|
+
demoOutput.textContent = 'Original text (no corruption)';
|
|
1866
|
+
} else {
|
|
1867
|
+
const corrupted = corruptTextJapanese(originalText, intensity);
|
|
1868
|
+
demoElement.textContent = corrupted;
|
|
1869
|
+
demoOutput.textContent = `Intensity: ${Math.round(intensity * 100)}% - Output randomizes every 3 seconds`;
|
|
1870
|
+
|
|
1871
|
+
// Re-corrupt on interval to show randomization
|
|
1872
|
+
demoInterval = setInterval(() => {
|
|
1873
|
+
if (currentIntensity > 0) {
|
|
1874
|
+
demoElement.textContent = corruptTextJapanese(originalText, currentIntensity);
|
|
1875
|
+
}
|
|
1876
|
+
}, 3000);
|
|
1877
|
+
}
|
|
1878
|
+
};
|
|
1879
|
+
|
|
1880
|
+
// Toast demo function
|
|
1881
|
+
window.showToastDemo = function(type) {
|
|
1882
|
+
const messages = {
|
|
1883
|
+
success: {
|
|
1884
|
+
title: 'Success',
|
|
1885
|
+
message: 'Data saved successfully! All changes have been applied.',
|
|
1886
|
+
},
|
|
1887
|
+
warning: {
|
|
1888
|
+
title: 'Warning',
|
|
1889
|
+
message: 'Please review your input before submitting the form.',
|
|
1890
|
+
},
|
|
1891
|
+
error: {
|
|
1892
|
+
title: 'Error',
|
|
1893
|
+
message: 'Failed to connect to server. Please try again later.',
|
|
1894
|
+
},
|
|
1895
|
+
info: {
|
|
1896
|
+
title: 'Info',
|
|
1897
|
+
message: 'New features are now available. Check them out!',
|
|
1898
|
+
}
|
|
1899
|
+
};
|
|
1900
|
+
|
|
1901
|
+
const config = messages[type] || messages.info;
|
|
1902
|
+
|
|
1903
|
+
switch(type) {
|
|
1904
|
+
case 'success':
|
|
1905
|
+
toast.success(config.message, config.title, 5000);
|
|
1906
|
+
break;
|
|
1907
|
+
case 'warning':
|
|
1908
|
+
toast.warning(config.message, config.title, 5000);
|
|
1909
|
+
break;
|
|
1910
|
+
case 'error':
|
|
1911
|
+
toast.error(config.message, config.title, 7000);
|
|
1912
|
+
break;
|
|
1913
|
+
case 'info':
|
|
1914
|
+
default:
|
|
1915
|
+
toast.info(config.message, config.title, 5000);
|
|
1916
|
+
break;
|
|
1917
|
+
}
|
|
1918
|
+
};
|
|
1919
|
+
|
|
1920
|
+
// Auto-show welcome message on page load
|
|
1921
|
+
setTimeout(() => {
|
|
1922
|
+
toast.success('Welcome to Corrupted Theme v0.1.3!', 'Welcome', 5000);
|
|
1923
|
+
}, 1000);
|
|
1924
|
+
</script>
|
|
1069
1925
|
</body>
|
|
1070
1926
|
</html>
|
|
1071
1927
|
|