← back to Paul Conrad Cartoons
public/index.html
220 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Inkwell — Editorial Cartoon Archive</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav class="topnav" id="topnav">
<div class="topnav-row1">
<button class="hamburger" id="hamburger" aria-label="Toggle menu" aria-expanded="false">☰</button>
<a class="wordmark" href="#" id="wordmark" data-section="all">
Inkwell <span>Editorial Cartoon Archive</span>
</a>
<div class="topnav-search">
<input id="search" type="search" placeholder="Search title, artist, date, collection…">
</div>
</div>
<div class="topnav-row2" id="topnav-row2">
<div class="section-links" id="section-links">
<a class="nav-anchor" href="#shadowman">Shadow Man</a>
<a class="nav-anchor" href="#arena">Arena Ideas</a>
<a class="nav-anchor" href="#p24">P24 Art</a>
<button type="button" data-kind="all" class="active">Public-domain cartoons</button>
<button type="button" data-kind="museum">Museums</button>
<button type="button" data-kind="library">Libraries & universities</button>
</div>
</div>
</nav>
<div class="masthead-sub">Private archive · public-domain cartoons from museums, libraries & universities · local reference tool, not published</div>
<section class="shadowman" id="shadowman" aria-labelledby="sm-heading">
<div class="p24-head">
<h2 id="sm-heading">Shadow Man <span>original editorial cartoons written from archive themes & eras</span></h2>
</div>
<div class="controls p24-controls">
<div>
<label for="sm-theme">Theme</label>
<select id="sm-theme"><option value="all">All themes</option></select>
</div>
<div>
<label for="sm-era">Era</label>
<select id="sm-era"><option value="all">All eras</option></select>
</div>
<div>
<label for="sm-sort">Sort</label>
<select id="sm-sort">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="title-az">Title A→Z</option>
<option value="theme">Theme</option>
<option value="era">Era</option>
</select>
</div>
<div class="density-wrap">
<label for="sm-density">Density</label>
<input type="range" id="sm-density" min="160" max="480" step="10">
</div>
<label class="toggle"><input type="checkbox" id="sm-show-deleted"> Show deleted</label>
<div class="result-count" id="sm-count"></div>
</div>
<div class="bulk-bar" id="sm-bulk" hidden role="region" aria-label="Bulk actions">
<span class="bulk-count">0 selected</span>
<button type="button" class="big-btn approve" data-bulk="approve">Approve 0</button>
<button type="button" class="big-btn delete" data-bulk="delete">Delete 0</button>
<button type="button" class="big-btn plain" data-bulk="all">Select all</button>
<button type="button" class="big-btn plain" data-bulk="clear">Clear</button>
</div>
<div class="grid-wrap">
<div class="grid sm-grid" id="sm-grid"></div>
</div>
</section>
<section class="arena" id="arena" aria-labelledby="ar-heading">
<div class="p24-head">
<h2 id="ar-heading">Arena Ideas <span>cartoon ideas from the local-model arena — approve to queue for rendering</span></h2>
</div>
<div class="controls p24-controls">
<div>
<label for="ar-model">Model</label>
<select id="ar-model"><option value="all">All models</option></select>
</div>
<div>
<label for="ar-theme">Theme</label>
<select id="ar-theme"><option value="all">All themes</option></select>
</div>
<div>
<label for="ar-sort">Sort</label>
<select id="ar-sort">
<option value="drawability">Drawability ↓</option>
<option value="newest">Newest</option>
<option value="title-az">Title A→Z</option>
<option value="model">Model</option>
<option value="theme">Theme</option>
</select>
</div>
<div class="density-wrap">
<label for="ar-density">Density</label>
<input type="range" id="ar-density" min="220" max="520" step="10">
</div>
<label class="toggle"><input type="checkbox" id="ar-show-deleted"> Show deleted</label>
<div class="result-count" id="ar-count"></div>
</div>
<div class="bulk-bar" id="ar-bulk" hidden role="region" aria-label="Bulk actions">
<span class="bulk-count">0 selected</span>
<button type="button" class="big-btn approve" data-bulk="approve">Approve 0</button>
<button type="button" class="big-btn delete" data-bulk="delete">Delete 0</button>
<button type="button" class="big-btn plain" data-bulk="all">Select all</button>
<button type="button" class="big-btn plain" data-bulk="clear">Clear</button>
</div>
<div class="grid-wrap">
<div class="grid ar-grid" id="ar-grid"></div>
</div>
</section>
<section class="p24" id="p24" aria-labelledby="p24-heading">
<div class="p24-head">
<h2 id="p24-heading">P24 Art <span>original photos & cartoons</span></h2>
</div>
<div class="controls p24-controls">
<div class="p24-filter" id="p24-filter" role="group" aria-label="Filter by type">
<button type="button" data-type="all">All</button>
<button type="button" data-type="photo">Photos</button>
<button type="button" data-type="cartoon">Cartoons</button>
</div>
<div>
<label for="p24-sort">Sort</label>
<select id="p24-sort">
<option value="newest">Newest</option>
<option value="oldest">Oldest</option>
<option value="title-az">Title A→Z</option>
<option value="type">Type</option>
</select>
</div>
<div class="density-wrap">
<label for="p24-density">Density</label>
<input type="range" id="p24-density" min="140" max="440" step="10">
</div>
<div class="result-count" id="p24-count"></div>
</div>
<div class="grid-wrap">
<div class="grid p24-grid" id="p24-grid"></div>
</div>
</section>
<section class="pd" id="pd" aria-labelledby="pd-heading">
<h2 class="section-heading" id="pd-heading">Public-domain cartoons <span>from museums, libraries & universities — each item marked public domain / CC0 by its holding institution</span></h2>
<div class="layout">
<aside class="filters">
<details class="filter-group" id="facet-source" open></details>
<details class="filter-group" id="facet-century" open></details>
<button class="clear-filters" id="clear-filters">Clear all filters</button>
</aside>
<main>
<div class="controls">
<div>
<label for="sort">Sort</label>
<select id="sort">
<option value="year-asc">Year ↑ (oldest first)</option>
<option value="year-desc">Year ↓ (newest first)</option>
<option value="title-az">Title A→Z</option>
<option value="artist-az">Artist A→Z</option>
<option value="source-az">Collection A→Z</option>
<option value="dataset">Dataset order</option>
</select>
</div>
<div class="density-wrap">
<label for="density">Density</label>
<input type="range" id="density" min="150" max="420" step="10">
</div>
<div class="result-count" id="result-count"></div>
</div>
<div class="grid-wrap">
<div class="grid" id="grid"></div>
</div>
</main>
</div>
</section>
<div class="modal-backdrop" id="modal-backdrop">
<div class="modal" id="modal-body"></div>
</div>
<div class="confirm-backdrop" id="link-backdrop">
<div class="confirm-box link-box" role="dialog" aria-modal="true" aria-labelledby="link-title" aria-describedby="link-for">
<h2 id="link-title">Link a P24 article</h2>
<p id="link-for"></p>
<label for="link-q">Search stories</label>
<input type="search" id="link-q" class="link-q" autocomplete="off" placeholder="Headline, tag or source">
<p class="link-status" id="link-status" aria-live="polite"></p>
<ul class="link-results" id="link-results"></ul>
<div class="confirm-actions">
<button type="button" class="big-btn plain" id="link-cancel">Cancel</button>
</div>
</div>
</div>
<div class="confirm-backdrop" id="confirm-backdrop">
<div class="confirm-box" role="alertdialog" aria-modal="true" aria-labelledby="confirm-title" aria-describedby="confirm-msg">
<h2 id="confirm-title">Please confirm</h2>
<p id="confirm-msg"></p>
<div class="confirm-actions">
<button type="button" class="big-btn plain" id="confirm-cancel">Cancel</button>
<button type="button" class="big-btn delete" id="confirm-ok">Delete</button>
</div>
</div>
</div>
<script src="app.js"></script>
<script src="curate.js"></script>
<script src="p24.js"></script>
<script src="shadowman.js"></script>
<script src="arena.js"></script>
</body>
</html>