← back to Crazy News Channel
cartoons/shadow-man.html
58 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Shadow Man — P24 Political Cartoon Desk</title>
<meta name="description" content="Shadow Man: original single-panel editorial cartoons from the P24 Cartoon Desk, written fresh from classic editorial themes and eras." />
<link rel="stylesheet" href="../assets/style.css" />
</head>
<body data-mood="all" class="shadow-man-page">
<header class="chrome">
<span class="logo-badge" aria-hidden="true">P24</span>
<h1>Shadow Man</h1>
<a class="home" href="index.html">← Cartoon Desk</a>
<a class="home" href="../index.html">PANDEMONIUM-24</a>
</header>
<main>
<p class="dek">Original single-panel editorial cartoons signed “Shadow Man” — new scenes and captions written from classic editorial themes and eras. Every figure is an unnamed archetype; no piece redraws any published cartoon.</p>
<div class="controls" role="group" aria-label="Filter, sort and display density">
<label for="smTheme">Theme
<select id="smTheme"><option value="all">All themes</option></select>
</label>
<label for="smEra">Era
<select id="smEra"><option value="all">All eras</option></select>
</label>
<label for="smSort">Sort
<select id="smSort">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="title">Title A→Z</option>
<option value="theme">Theme</option>
<option value="era">Era</option>
</select>
</label>
<label for="smDensity">Density
<input type="range" id="smDensity" min="220" max="520" step="20" value="320" aria-valuetext="card width">
</label>
<span id="smCount"></span>
</div>
<div class="grid sm-grid" id="smGrid" role="list"></div>
<div class="empty" id="smEmpty" hidden><p id="smEmptyMsg">No Shadow Man cartoons match this filter.</p></div>
<dialog class="sm-dialog" id="smDialog" aria-labelledby="smDialogTitle">
<button type="button" class="sm-close" id="smClose" aria-label="Close">×</button>
<h2 id="smDialogTitle"></h2>
<p class="sm-meta" id="smDialogMeta"></p>
<img id="smDialogImg" alt="" />
<p class="sm-caption" id="smDialogCaption"></p>
</dialog>
</main>
<footer>Shadow Man cartoons are original, AI-assisted invented satire rendered locally. All persons are fictional archetypes. Part of PANDEMONIUM-24.</footer>
<script src="shadow-man-data.js"></script>
<script src="shadow-man.js"></script>
</body>
</html>