← back to Paul Conrad Archive
src/conrad/web/static/index.html
62 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="robots" content="noindex,nofollow">
<title>Paul Conrad Archive</title>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<header class="top">
<a href="/" class="brand">Paul Conrad Master Archive</a>
<nav class="tabs" aria-label="Views"><button id="all" type="button" class="tab on">All cartoons</button></nav>
<span class="muted">1924–2010 · images appear only where the holding institution publishes one (shown from its site, never copied) — otherwise follow “View at” link-outs</span>
</header>
<main class="layout">
<aside class="filters" aria-label="Filters">
<label class="check"><input id="has_image" type="checkbox"> Has image (from the holding institution)</label>
<label>Search <input id="q" type="search" placeholder="title, caption, person, subject…" autocomplete="off"></label>
<label>Record level
<select id="granularity">
<option value="item">Item-level cartoons</option>
<option value="folder">Folder-level records</option>
<option value="box_range">Huntington box-range slots</option>
<option value="all">All levels</option>
</select>
</label>
<div class="row2">
<label>From <input id="year_from" type="number" min="1945" max="2010" placeholder="1945"></label>
<label>To <input id="year_to" type="number" min="1945" max="2010" placeholder="2010"></label>
</div>
<label>President <select id="president"><option value="">any</option></select></label>
<label>Person <select id="person"><option value="">any</option></select></label>
<label>Topic <select id="subject"><option value="">any</option></select></label>
<label>Publication <select id="publication"><option value="">any</option></select></label>
<label>Repository <select id="repository"><option value="">any</option></select></label>
<label>Collection <select id="collection"><option value="">any</option></select></label>
<button id="reset" type="button">Reset filters</button>
</aside>
<section class="results">
<div id="timeline" class="timeline" aria-label="Timeline (click a year)"></div>
<div class="controls">
<span id="count" class="muted"></span>
<label>Sort
<select id="sort">
<option value="date_desc">Newest (date)</option>
<option value="date_asc">Oldest (date)</option>
<option value="title">Title A→Z</option>
<option value="repository">Repository</option>
<option value="year">Year</option>
</select>
</label>
<label>Density <input id="density" type="range" min="1" max="6" step="1"></label>
</div>
<div id="grid" class="grid"></div>
<div class="pager"><button id="more" type="button">Load more</button></div>
</section>
</main>
<script src="/static/app.js"></script>
</body>
</html>