Skip to content

fix(examples): rewrite 8 broken 0.2.0 pages to button.html template #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
whykusanagi merged 2 commits into from
May 18, 2026
Merged

fix(examples): rewrite 8 broken 0.2.0 pages to button.html template #22

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9528fad
fix(examples): broken CSS vars + missing nav on 0.2.0 example pages
whykusanagi May 18, 2026
d8626c3
fix(examples): rewrite 8 broken 0.2.0 pages to follow button.html tem…
whykusanagi May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
297 changes: 152 additions & 145 deletions examples/advanced/corruption-manager.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,58 +3,74 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CorruptionManager · corrupted-theme</title>
<title>Corruption Manager - Corrupted Theme</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
<link rel="stylesheet" href="../../src/css/theme.css">
<style>
body {
margin: 0;
padding: 2rem;
background: var(--bg-primary);
color: var(--text-primary);
font-family: 'Courier New', monospace;
.container {
max-width: 1200px;
margin: 0 auto;
padding: var(--spacing-lg);
}

.page-header {
text-align: center;
margin-bottom: 2.5rem;
.example-group {
margin-bottom: var(--spacing-2xl);
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
}

.page-header h1 {
color: var(--corrupted-cyan);
text-shadow: 0 0 20px var(--corrupted-cyan);
font-size: 1.8rem;
margin-bottom: 0.5rem;
.example-group h3 {
color: var(--accent);
margin-bottom: var(--spacing-lg);
font-size: 1.25rem;
}

.page-header p {
color: var(--text-muted);
font-size: 0.85rem;
.demo-area {
padding: var(--spacing-lg);
background: var(--bg-secondary);
border-radius: var(--radius-md);
margin-block: var(--spacing-md);
}

.back-link {
display: inline-flex;
align-items: center;
gap: 0.4rem;
color: var(--corrupted-cyan);
text-decoration: none;
font-size: 0.85rem;
margin-bottom: 2rem;
.code-block {
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--spacing-md);
margin-top: var(--spacing-md);
font-family: 'Courier New', monospace;
font-size: 0.875rem;
color: var(--text-secondary);
overflow-x: auto;
}

.code-block pre {
margin: 0;
font-size: 0.75rem;
color: var(--text-secondary);
line-height: 1.5;
}

.back-link:hover { opacity: 0.7; }
.controls {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
margin-block: var(--spacing-md);
}

/* ── Three demo sections ─────────────────────────────────────────────── */
/* ── Three demo cards ─────────────────────────────────────────────── */

.demo-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 1.5rem;
margin-bottom: 2rem;
margin-block: var(--spacing-md);
}

.demo-card {
background: var(--glass);
background: var(--glass-darker);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
overflow: hidden;
Expand All @@ -68,10 +84,10 @@
border-bottom: 1px solid var(--border);
}

.demo-card__header h2 {
.demo-card__header h4 {
margin: 0;
font-size: 0.9rem;
color: var(--corrupted-cyan);
color: var(--accent);
text-transform: uppercase;
letter-spacing: 0.1em;
}
Expand All @@ -95,6 +111,7 @@
letter-spacing: 2px;
word-break: break-all;
text-align: center;
font-family: 'Courier New', monospace;
}

.demo-card__footer {
Expand All @@ -109,127 +126,114 @@
font-size: 0.78rem;
padding: 0.3rem 0.8rem;
}

/* ── Manager-level controls ──────────────────────────────────────────── */

.manager-controls {
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
margin-bottom: 2rem;
}

.manager-controls h3 {
color: var(--accent);
font-size: 0.85rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 var(--spacing-md);
}

.manager-controls .btn-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
}

/* ── Code block ─────────────────────────────────────────────────────── */

.code-block {
background: var(--glass);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
padding: var(--spacing-lg);
}

.code-block h3 {
color: var(--accent);
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.1em;
margin: 0 0 var(--spacing-md);
}

.code-block pre {
margin: 0;
overflow-x: auto;
font-size: 0.75rem;
color: var(--corrupted-cyan);
line-height: 1.5;
}
</style>
</head>
<body>

<a href="../index.html" class="back-link"><i class="fas fa-arrow-left"></i> Examples home</a>

<div class="page-header">
<h1><i class="fas fa-brain"></i> CorruptionManager</h1>
<p>Unified lifecycle manager for the three canonical corruption patterns — <code>src/core/corruption-manager.js</code></p>
</div>

<!-- Manager-level stop/destroy -->
<div class="manager-controls">
<h3><i class="fas fa-layer-group"></i> Manager</h3>
<div class="btn-row">
<button class="btn" id="btn-stop-all">Stop All</button>
<button class="btn" id="btn-destroy-manager">Destroy Manager</button>
<button class="btn" id="btn-recreate-manager">Re-create Manager</button>
<!-- Global Navigation -->
<nav class="navbar">
<div class="navbar-content">
<a href="../index.html" class="navbar-logo"><i class="fas fa-palette"></i> Corrupted Theme</a>
<ul class="navbar-links">
<li><a href="../index.html"><i class="fas fa-home"></i> Home</a></li>
<li><a href="../showcase-complete.html"><i class="fas fa-cube"></i> Components</a></li>
<li><a href="../extensions-showcase.html"><i class="fas fa-puzzle-piece"></i> Extensions</a></li>
<li class="has-submenu">
<a href="#" class="active">
<i class="fas fa-flask"></i> Examples
<i class="fas fa-chevron-down" style="font-size: 0.7em; margin-left: 4px;"></i>
</a>
<div class="submenu">
<a href="../nikke-team-builder.html"><i class="fas fa-users"></i> Nikke Team Builder</a>
<a href="../button.html"><i class="fas fa-hand-pointer"></i> Buttons</a>
<a href="../card.html"><i class="fas fa-square"></i> Cards</a>
<a href="../form.html"><i class="fas fa-edit"></i> Forms</a>
<a href="../layout.html"><i class="fas fa-columns"></i> Layouts</a>
<a href="../basic/corrupted-text.html"><i class="fas fa-terminal"></i> Character Corruption</a>
<a href="../basic/typing-animation.html"><i class="fas fa-keyboard"></i> Buffer Corruption</a>
<a href="../animation-blocks/index.html"><i class="fas fa-film"></i> Animation Blocks</a>
<a href="../advanced/crt-effects.html"><i class="fas fa-tv"></i> CRT Effects</a>
<a href="../advanced/corruption-manager.html" class="active"><i class="fas fa-sitemap"></i> Corruption Manager</a>
<a href="../components/showcase.html"><i class="fas fa-th-large"></i> Widgets Showcase</a>
</div>
</li>
<li><a href="../showcase-complete.html"><i class="fas fa-book"></i> Docs</a></li>
</ul>
</div>
</div>

<!-- Three pattern demos side-by-side -->
<div class="demo-grid">

<!-- Pattern 1: Decode -->
<div class="demo-card">
<div class="demo-card__header">
<h2>Pattern 1 · Decode</h2>
<p>Character-by-character corruption → readable text</p>
</nav>

<div class="container">
<h1><i class="fas fa-sitemap"></i> Corruption Manager</h1>
<p style="color: var(--text-secondary); margin-bottom: var(--spacing-2xl);">
Unified corruption animation lifecycle — decode, flicker, hybrid.
Provided by <code>src/core/corruption-manager.js</code>.
</p>

<!-- Manager-level controls -->
<section class="example-group">
<h3><i class="fas fa-layer-group"></i> Manager Controls</h3>
<div class="controls">
<button class="btn" id="btn-stop-all">Stop All</button>
<button class="btn" id="btn-destroy-manager">Destroy Manager</button>
<button class="btn" id="btn-recreate-manager">Re-create Manager</button>
</div>
<div class="demo-target" id="target-decode" style="color: var(--corrupted-cyan);">
Click Decode to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-decode">Decode</button>
</div>
</div>
</section>

<!-- Three pattern demos side-by-side -->
<section class="example-group">
<h3><i class="fas fa-random"></i> Three Canonical Patterns</h3>

<div class="demo-grid">

<!-- Pattern 1: Decode -->
<div class="demo-card">
<div class="demo-card__header">
<h4>Pattern 1 · Decode</h4>
<p>Character-by-character corruption → readable text</p>
</div>
<div class="demo-target" id="target-decode" style="color: var(--corrupted-cyan, #00ffff);">
Click Decode to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-decode">Decode</button>
</div>
</div>

<!-- Pattern 2: Flicker -->
<div class="demo-card">
<div class="demo-card__header">
<h4>Pattern 2 · Flicker</h4>
<p>Rapid phrase cycling — unstable signal simulation</p>
</div>
<div class="demo-target" id="target-flicker" style="color: var(--corrupted-magenta, #ff00ff);">
Click Flicker to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-flicker">Flicker</button>
</div>
</div>

<!-- Pattern 3: Hybrid -->
<div class="demo-card">
<div class="demo-card__header">
<h4>Pattern 3 · Hybrid</h4>
<p>Flicker phase → decode phase (maximum chaos)</p>
</div>
<div class="demo-target" id="target-hybrid" style="color: var(--corrupted-purple, #8b5cf6);">
Click Hybrid to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-hybrid">Hybrid</button>
</div>
</div>

<!-- Pattern 2: Flicker -->
<div class="demo-card">
<div class="demo-card__header">
<h2>Pattern 2 · Flicker</h2>
<p>Rapid phrase cycling — unstable signal simulation</p>
</div>
<div class="demo-target" id="target-flicker" style="color: var(--corrupted-magenta);">
Click Flicker to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-flicker">Flicker</button>
</div>
</div>

<!-- Pattern 3: Hybrid -->
<div class="demo-card">
<div class="demo-card__header">
<h2>Pattern 3 · Hybrid</h2>
<p>Flicker phase → decode phase (maximum chaos)</p>
</div>
<div class="demo-target" id="target-hybrid" style="color: var(--corrupted-purple);">
Click Hybrid to start
</div>
<div class="demo-card__footer">
<button class="btn" id="btn-hybrid">Hybrid</button>
</div>
</div>

</div>
</section>

<!-- Usage snippet -->
<div class="code-block">
<h3>Usage</h3>
<pre><code>import { CorruptionManager } from 'src/core/corruption-manager.js';
<!-- Usage snippet -->
<section class="example-group">
<h3><i class="fas fa-code"></i> Usage</h3>
<div class="code-block">
<pre><code>import { CorruptionManager } from 'src/core/corruption-manager.js';

const mgr = new CorruptionManager({ nsfw: false });

Expand All @@ -249,6 +253,9 @@ <h3>Usage</h3>

mgr.stop(); // cancel all running animations
mgr.destroy(); // full teardown (visibilitychange listener removed)</code></pre>
</div>
</section>

</div>

<script type="module">
Expand Down
Loading
Loading