Pages Medium
Science — Journal Issue Index
A polished academic journal issue table-of-contents page for a fictional computational biophysics journal. Features a double-rule masthead with ISSN and volume metadata, an issue selector, animated cover panel, and articles grouped into Editorial, Research, Reviews, and Letters sections. Each entry shows authors, affiliations, page ranges, open-access badges, expandable abstracts, PDF links, and copyable DOIs, with live access filtering and keyword search.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #ffffff;
--bg-alt: #f6f8fb;
--ink: #0f1b2d;
--ink-2: #33445c;
--muted: #697892;
--accent: #1a4f8a;
--accent-d: #123a66;
--accent-50: #e9f0f9;
--teal: #0f7d78;
--teal-50: #e4f3f1;
--line: rgba(15, 27, 45, 0.12);
--line-2: rgba(15, 27, 45, 0.2);
--ok: #2f9e6f;
--warn: #c9821f;
--danger: #cf4538;
--r-sm: 6px;
--r-md: 10px;
--r-lg: 16px;
--shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.06);
--shadow-md: 0 6px 22px rgba(15, 27, 45, 0.08);
--serif: "Source Serif 4", Georgia, serif;
--ui: "Inter", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--serif);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mono { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.skip-link {
position: absolute;
left: -999px;
top: 0;
background: var(--accent);
color: #fff;
padding: 10px 16px;
border-radius: 0 0 var(--r-sm) 0;
font-family: var(--ui);
z-index: 50;
}
.skip-link:focus { left: 0; }
:focus-visible {
outline: 3px solid var(--accent);
outline-offset: 2px;
border-radius: 3px;
}
/* ---------- Masthead ---------- */
.masthead {
border-bottom: 3px double var(--line-2);
background: var(--bg);
}
.masthead__inner {
max-width: 1100px;
margin: 0 auto;
padding: 28px 24px 22px;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 28px;
flex-wrap: wrap;
}
.masthead__brand { display: flex; gap: 18px; align-items: flex-start; }
.masthead__mark {
flex: none;
width: 58px;
height: 58px;
display: grid;
place-items: center;
background: var(--accent);
color: #fff;
border-radius: var(--r-md);
font-family: var(--ui);
font-weight: 700;
font-size: 1.25rem;
letter-spacing: 0.04em;
box-shadow: var(--shadow-sm);
}
.masthead__title {
margin: 0;
font-size: 1.7rem;
line-height: 1.15;
font-weight: 700;
color: var(--ink);
letter-spacing: -0.01em;
}
.masthead__sub {
margin: 6px 0 8px;
color: var(--ink-2);
font-size: 1rem;
font-style: italic;
}
.masthead__issn {
margin: 0;
font-family: var(--ui);
font-size: 0.78rem;
color: var(--muted);
}
.issue-select { display: flex; flex-direction: column; gap: 6px; font-family: var(--ui); }
.issue-select__label {
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--muted);
font-weight: 600;
}
.issue-select select {
font-family: var(--ui);
font-size: 0.92rem;
font-weight: 600;
color: var(--ink);
background: var(--bg-alt);
border: 1px solid var(--line-2);
border-radius: var(--r-md);
padding: 10px 14px;
cursor: pointer;
min-width: 240px;
}
.issue-select select:hover { border-color: var(--accent); }
/* ---------- Layout ---------- */
.layout {
max-width: 1100px;
margin: 0 auto;
padding: 32px 24px 64px;
}
.eyebrow {
text-transform: uppercase;
letter-spacing: 0.12em;
font-size: 0.72rem;
color: var(--teal);
font-weight: 500;
margin: 0 0 8px;
}
/* ---------- Issue head ---------- */
.issue-head {
display: grid;
grid-template-columns: 1fr 280px;
gap: 40px;
padding-bottom: 32px;
border-bottom: 1px solid var(--line);
}
.issue-head__title {
margin: 0;
font-size: 2.1rem;
font-weight: 700;
letter-spacing: -0.02em;
}
.issue-head__date {
margin: 4px 0 16px;
font-family: var(--ui);
color: var(--accent);
font-weight: 600;
}
.issue-head__lede { margin: 0 0 22px; color: var(--ink-2); max-width: 54ch; }
.issue-head__stats { display: flex; gap: 28px; margin-bottom: 24px; }
.stat { display: flex; flex-direction: column; }
.stat__num { font-size: 1.5rem; font-weight: 500; color: var(--ink); }
.stat__lab { font-family: var(--ui); font-size: 0.74rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.btn {
font-family: var(--ui);
font-weight: 600;
font-size: 0.9rem;
border: 1px solid transparent;
border-radius: var(--r-md);
padding: 11px 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 8px;
transition: transform 0.12s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--accent-d); box-shadow: var(--shadow-md); }
/* ---------- Cover ---------- */
.cover { margin: 0; }
.cover__art {
position: relative;
aspect-ratio: 3 / 4;
border-radius: var(--r-md);
background: radial-gradient(120% 120% at 30% 10%, #1b3a5e 0%, #0c1f38 55%, #07142a 100%);
overflow: hidden;
box-shadow: var(--shadow-md);
border: 1px solid var(--accent-d);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 16px;
}
.cover__journal {
font-family: var(--ui);
font-weight: 600;
font-size: 0.8rem;
letter-spacing: 0.05em;
color: #cfe0f2;
z-index: 2;
}
.cover__vol {
font-size: 0.72rem;
letter-spacing: 0.1em;
color: #8fb4dc;
z-index: 2;
align-self: flex-end;
}
.cover__rings {
position: absolute;
inset: 0;
display: grid;
place-items: center;
}
.cover__rings span {
position: absolute;
border: 2px solid rgba(120, 175, 230, 0.4);
border-radius: 50%;
animation: pulse 6s ease-in-out infinite;
}
.cover__rings span:nth-child(1) { width: 60%; height: 60%; }
.cover__rings span:nth-child(2) { width: 78%; height: 78%; border-color: rgba(15, 125, 120, 0.45); animation-delay: 1.5s; }
.cover__rings span:nth-child(3) { width: 96%; height: 96%; animation-delay: 3s; }
.cover__rings span:nth-child(4) { width: 42%; height: 42%; background: rgba(120, 175, 230, 0.12); animation-delay: 0.7s; }
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 0.55; }
50% { transform: scale(1.06); opacity: 0.9; }
}
@media (prefers-reduced-motion: reduce) {
.cover__rings span { animation: none; }
}
.cover figcaption {
font-family: var(--ui);
font-size: 0.76rem;
color: var(--muted);
margin-top: 10px;
line-height: 1.45;
}
.cover figcaption strong { color: var(--ink-2); }
/* ---------- Toolbar ---------- */
.toolbar {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
padding: 22px 0 8px;
font-family: var(--ui);
}
.toolbar__filters { display: flex; gap: 8px; }
.chip {
font-family: var(--ui);
font-size: 0.84rem;
font-weight: 600;
color: var(--ink-2);
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: 999px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.14s ease;
}
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.search {
display: flex;
align-items: center;
gap: 8px;
flex: 1;
min-width: 220px;
background: var(--bg-alt);
border: 1px solid var(--line);
border-radius: var(--r-md);
padding: 9px 14px;
color: var(--muted);
}
.search:focus-within { border-color: var(--accent); background: #fff; }
.search input {
border: 0;
background: none;
font-family: var(--ui);
font-size: 0.9rem;
color: var(--ink);
width: 100%;
outline: none;
}
.toolbar__count { font-size: 0.8rem; color: var(--muted); margin-left: auto; }
/* ---------- TOC sections ---------- */
.toc { margin-top: 12px; }
.section { margin-top: 36px; }
.section__head {
display: flex;
align-items: baseline;
gap: 12px;
border-bottom: 2px solid var(--ink);
padding-bottom: 8px;
margin-bottom: 4px;
}
.section__title {
font-family: var(--ui);
font-weight: 700;
font-size: 1.05rem;
letter-spacing: 0.02em;
text-transform: uppercase;
color: var(--ink);
margin: 0;
}
.section__count {
font-family: var(--mono);
font-size: 0.8rem;
color: var(--muted);
}
.article {
padding: 20px 0;
border-bottom: 1px solid var(--line);
}
.article__top {
display: grid;
grid-template-columns: 1fr auto;
gap: 16px 24px;
align-items: start;
}
.article__title {
font-family: var(--serif);
font-size: 1.18rem;
font-weight: 600;
line-height: 1.32;
margin: 0 0 6px;
color: var(--ink);
}
.article__title a { color: inherit; text-decoration: none; }
.article__title a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.article__authors {
font-family: var(--ui);
font-size: 0.9rem;
color: var(--ink-2);
margin: 0 0 6px;
}
.article__affil {
font-family: var(--ui);
font-size: 0.8rem;
font-style: italic;
color: var(--muted);
margin: 0;
}
.article__meta {
text-align: right;
font-family: var(--mono);
font-size: 0.78rem;
color: var(--muted);
white-space: nowrap;
}
.article__pages { color: var(--ink-2); display: block; margin-bottom: 6px; }
.badge {
display: inline-flex;
align-items: center;
gap: 5px;
font-family: var(--ui);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
padding: 3px 8px;
border-radius: var(--r-sm);
border: 1px solid transparent;
}
.badge--oa { background: var(--teal-50); color: var(--teal); border-color: rgba(15, 125, 120, 0.3); }
.badge--closed { background: var(--bg-alt); color: var(--muted); border-color: var(--line-2); }
.badge--type { background: var(--accent-50); color: var(--accent); }
.article__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
margin-top: 14px;
}
.article__actions .badge { margin-right: 4px; }
.action {
font-family: var(--ui);
font-size: 0.8rem;
font-weight: 600;
color: var(--accent);
background: none;
border: 1px solid var(--line-2);
border-radius: var(--r-sm);
padding: 6px 12px;
cursor: pointer;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.14s ease;
}
.action:hover { background: var(--accent-50); border-color: var(--accent); }
.action--ghost { color: var(--ink-2); border-color: var(--line); }
.action--ghost[aria-expanded="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.action .doi { font-family: var(--mono); font-size: 0.74rem; color: var(--muted); }
.abstract {
font-family: var(--serif);
font-size: 0.96rem;
color: var(--ink-2);
background: var(--bg-alt);
border-left: 3px solid var(--accent);
border-radius: 0 var(--r-sm) var(--r-sm) 0;
padding: 0 18px;
margin-top: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition: max-height 0.32s ease, opacity 0.25s ease, padding 0.32s ease, margin-top 0.32s ease;
}
.abstract.is-open {
max-height: 420px;
opacity: 1;
padding: 14px 18px;
margin-top: 14px;
}
.abstract h4 {
font-family: var(--ui);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
margin: 0 0 6px;
}
.abstract p { margin: 0 0 8px; }
.abstract .kw { font-family: var(--ui); font-size: 0.78rem; color: var(--muted); }
.abstract .kw b { color: var(--ink-2); font-weight: 600; }
.empty {
text-align: center;
font-family: var(--ui);
color: var(--muted);
padding: 48px 0;
}
.linkbtn {
background: none;
border: 0;
color: var(--accent);
font: inherit;
font-weight: 600;
cursor: pointer;
text-decoration: underline;
}
/* ---------- Footer ---------- */
.site-footer {
border-top: 1px solid var(--line);
max-width: 1100px;
margin: 0 auto;
padding: 28px 24px 48px;
font-family: var(--ui);
font-size: 0.82rem;
color: var(--muted);
}
.site-footer p { margin: 4px 0; }
/* ---------- Toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 28px;
transform: translate(-50%, 24px);
background: var(--ink);
color: #fff;
font-family: var(--ui);
font-size: 0.88rem;
font-weight: 500;
padding: 12px 20px;
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease;
z-index: 60;
}
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* ---------- Responsive ---------- */
@media (max-width: 860px) {
.issue-head { grid-template-columns: 1fr; }
.cover { max-width: 280px; }
}
@media (max-width: 640px) {
.masthead__inner { padding: 20px 16px; gap: 18px; }
.masthead__title { font-size: 1.35rem; }
.masthead__mark { width: 48px; height: 48px; font-size: 1.05rem; }
.issue-select select { min-width: 100%; width: 100%; }
.layout { padding: 24px 16px 48px; }
.issue-head__title { font-size: 1.6rem; }
.issue-head__stats { gap: 20px; }
.btn--primary { width: 100%; justify-content: center; }
.article__top { grid-template-columns: 1fr; }
.article__meta { text-align: left; }
.article__pages { display: inline; margin-right: 12px; }
.toolbar__count { margin-left: 0; width: 100%; }
.site-footer { padding: 24px 16px 40px; }
}(function () {
"use strict";
// ----- Fictional issue data -----
const SECTIONS = [
{
id: "editorial",
name: "Editorial",
articles: [
{
id: "ed1",
title: "Reproducibility is a measurement, not a virtue",
authors: "Mara T. Lindqvist",
affil: "Editor-in-Chief, Marlowe Institute Press",
pages: "401–403",
doi: "10.48391/jcb.2026.1204.0401",
oa: true,
keywords: "reproducibility, FAIR data, editorial policy",
abstract:
"Computational biophysics produces results that should, in principle, be perfectly reproducible — yet our 2025 audit found that only 41% of accepted manuscripts shipped runnable inputs. This editorial argues that reproducibility ought to be reported as a quantitative coverage metric (fraction of figures regenerable from deposited artifacts) rather than treated as an aspirational badge.",
},
],
},
{
id: "research",
name: "Research Articles",
articles: [
{
id: "ra1",
title:
"Coarse-grained self-assembly of asymmetric lipid bilayers under lateral tension",
authors: "C. O. Okonkwo, L. Halvorsen, R. M. Patel",
affil: "Dept. of Molecular Physics, Brindlewood University; Helix Lab, ETH-adjacent Consortium",
pages: "432–451",
doi: "10.48391/jcb.2026.1204.0432",
oa: true,
keywords: "MARTINI, membrane mechanics, area-per-lipid, tension",
abstract:
"We report 12 µs coarse-grained trajectories of asymmetric POPC/POPE bilayers across lateral tensions of 0–8 mN·m⁻¹. The bending modulus κ scales as κ ≈ 21.4 ± 0.7 kBT at zero tension and softens by 18% near the rupture threshold. A simple continuum fit reproduces the measured area-per-lipid (0.642 nm²) to within 1.3%, suggesting that mesoscale elasticity emerges robustly from the underlying bead topology.",
},
{
id: "ra2",
title:
"A message-passing force field for transition-metal active sites with sub-kcal accuracy",
authors: "S. Yamamoto, D. Reyes-Cardona, A. Bergström, P. Q. Nwosu",
affil: "Center for Learned Potentials, Aurelia Institute of Technology",
pages: "452–470",
doi: "10.48391/jcb.2026.1204.0452",
oa: false,
keywords: "machine-learned potentials, DFT, metalloenzymes, MAE",
abstract:
"We train an equivariant message-passing network on 1.2 million DFT single points spanning copper- and iron-centered cofactors. On a held-out reaction set the model attains a mean absolute energy error of 0.71 kcal·mol⁻¹ and force error of 38 meV·Å⁻¹, enabling nanosecond reactive dynamics at near-DFT fidelity and a 4,200× speedup over the reference functional.",
},
{
id: "ra3",
title:
"Allosteric coupling in a designed PDZ domain mapped by perturbation-response scanning",
authors: "E. Voronova, T. K. Adeyemi",
affil: "Structural Dynamics Group, Northfield Polytechnic",
pages: "471–486",
doi: "10.48391/jcb.2026.1204.0471",
oa: true,
keywords: "allostery, elastic network, PRS, protein design",
abstract:
"Using perturbation-response scanning over 3.4 µs of all-atom dynamics, we identify a contiguous allosteric channel linking the ligand-binding groove to a distal helix in a de-novo PDZ variant. Residue F18 acts as the dominant relay (response coefficient 0.83), and its alanine substitution abolishes 71% of measured long-range coupling in silico.",
},
{
id: "ra4",
title:
"Hydration shell relaxation governs glass-forming behavior in trehalose-protein matrices",
authors: "H. Nakamura, B. O. Castellano, F. Lindgren",
affil: "Soft Matter Division, Kestrel National Laboratory",
pages: "487–501",
doi: "10.48391/jcb.2026.1204.0487",
oa: false,
keywords: "vitrification, cryopreservation, dielectric relaxation",
abstract:
"Combining 8 µs of simulation with a two-state relaxation model, we show that the glass-transition temperature of trehalose-lysozyme matrices is set by the slowest hydration-shell reorientation mode (τ ≈ 142 ns at 245 K). The result rationalizes long-standing discrepancies between calorimetric and dielectric estimates of Tg by 9–14 K.",
},
],
},
{
id: "reviews",
name: "Reviews",
articles: [
{
id: "rv1",
title:
"Free-energy methods at scale: a decade of enhanced sampling, 2016–2026",
authors: "G. Marchetti, N. P. Osei, J. Whitlock",
affil: "Theory Consortium, Marlowe Institute",
pages: "405–428",
doi: "10.48391/jcb.2026.1204.0405",
oa: true,
keywords: "metadynamics, replica exchange, alchemy, convergence",
abstract:
"We survey ten years of enhanced-sampling methodology, contrasting collective-variable, tempering, and alchemical families across 60+ benchmark systems. We propose a unified convergence diagnostic — the effective transition count per wall-clock hour — and tabulate it for the major open-source engines, finding a 30× spread that is largely attributable to integrator choice rather than algorithm class.",
},
{
id: "rv2",
title:
"Generative models for protein conformational ensembles: promise and pitfalls",
authors: "A. Solberg, M. R. Iyer",
affil: "Generative Biophysics Lab, Aurelia Institute of Technology",
pages: "502–518",
doi: "10.48391/jcb.2026.1204.0502",
oa: true,
keywords: "diffusion models, ensembles, Boltzmann generators",
abstract:
"Generative samplers promise Boltzmann-weighted ensembles without long trajectories, but uncritical use risks mode collapse and thermodynamic inconsistency. We review the current model zoo, define three falsifiable validation tests (free-energy closure, observable recovery, and unseen-state extrapolation), and apply them to four published architectures.",
},
],
},
{
id: "letters",
name: "Letters",
articles: [
{
id: "lt1",
title:
"A 200-line drop-in checkpoint format that halves restart overhead",
authors: "K. Brennan, P. Q. Nwosu",
affil: "HPC Tooling Group, Brindlewood University",
pages: "429–431",
doi: "10.48391/jcb.2026.1204.0429",
oa: true,
keywords: "checkpointing, I/O, HPC, tooling",
abstract:
"We describe a compact, zero-dependency checkpoint container that interleaves coordinate and integrator state with content-addressed deduplication. Across three production codes it reduced restart wall-time by 49 ± 6% and on-disk footprint by 2.7× with no measurable runtime penalty.",
},
{
id: "lt2",
title:
"Comment on 'Anomalous diffusion in crowded cytoplasm' (JCB 12:2, 211)",
authors: "R. del Bosque",
affil: "Independent researcher, Lisbon",
pages: "430–431",
doi: "10.48391/jcb.2026.1204.0430b",
oa: false,
keywords: "anomalous diffusion, crowding, comment",
abstract:
"The original analysis fits a single anomalous exponent across two decades of lag time. We show that a two-regime fit reduces the residual by 62% and recovers a Fickian plateau at long times, implying that the reported subdiffusion is a transient rather than an asymptotic property of the crowded medium.",
},
],
},
];
// ----- DOM helpers -----
const tocEl = document.getElementById("toc");
const emptyEl = document.getElementById("emptyState");
const searchInput = document.getElementById("searchInput");
const resultCount = document.getElementById("resultCount");
const toastEl = document.getElementById("toast");
let toastTimer = null;
function toast(msg) {
toastEl.textContent = msg;
toastEl.classList.add("is-visible");
clearTimeout(toastTimer);
toastTimer = setTimeout(() => toastEl.classList.remove("is-visible"), 2400);
}
function esc(s) {
return String(s).replace(/[&<>"]/g, (c) =>
({ "&": "&", "<": "<", ">": ">", '"': """ }[c])
);
}
// ----- Render -----
function articleNode(a, typeName) {
const li = document.createElement("article");
li.className = "article";
li.dataset.access = a.oa ? "oa" : "closed";
li.dataset.search = (
a.title + " " + a.authors + " " + a.keywords + " " + a.affil
).toLowerCase();
const accessBadge = a.oa
? '<span class="badge badge--oa" title="Open access, CC BY 4.0">Open access</span>'
: '<span class="badge badge--closed" title="Subscription / institutional access">Subscription</span>';
li.innerHTML = `
<div class="article__top">
<div>
<span class="badge badge--type">${esc(typeName)}</span>
<h4 class="article__title"><a href="#${a.id}">${esc(a.title)}</a></h4>
<p class="article__authors">${esc(a.authors)}</p>
<p class="article__affil">${esc(a.affil)}</p>
</div>
<div class="article__meta">
<span class="article__pages">pp. ${esc(a.pages)}</span>
<span class="article__id">Art. ${esc(a.id.toUpperCase())}</span>
</div>
</div>
<div class="article__actions">
${accessBadge}
<button class="action action--ghost" type="button" aria-expanded="false" aria-controls="abs-${a.id}" data-abs="${a.id}">
Abstract
</button>
<a class="action" href="#" data-pdf="${esc(a.pages)}">PDF</a>
<span class="action doi" data-doi="${esc(a.doi)}" role="button" tabindex="0" title="Copy DOI">doi:${esc(a.doi)}</span>
</div>
<div class="abstract" id="abs-${a.id}" role="region" aria-label="Abstract for ${esc(a.title)}">
<h4>Abstract</h4>
<p>${esc(a.abstract)}</p>
<p class="kw"><b>Keywords:</b> ${esc(a.keywords)}</p>
</div>
`;
return li;
}
function render() {
tocEl.innerHTML = "";
SECTIONS.forEach((sec) => {
const section = document.createElement("section");
section.className = "section";
section.dataset.section = sec.id;
const head = document.createElement("div");
head.className = "section__head";
head.innerHTML = `
<h3 class="section__title">${esc(sec.name)}</h3>
<span class="section__count" data-sec-count>${sec.articles.length} article${sec.articles.length === 1 ? "" : "s"}</span>
`;
section.appendChild(head);
sec.articles.forEach((a) => section.appendChild(articleNode(a, sec.name)));
tocEl.appendChild(section);
});
}
render();
// ----- Abstract toggle (event delegation) -----
tocEl.addEventListener("click", (e) => {
const toggle = e.target.closest("[data-abs]");
if (toggle) {
const panel = document.getElementById("abs-" + toggle.dataset.abs);
const open = panel.classList.toggle("is-open");
toggle.setAttribute("aria-expanded", String(open));
toggle.textContent = open ? "Hide abstract" : "Abstract";
return;
}
const pdf = e.target.closest("[data-pdf]");
if (pdf) {
e.preventDefault();
toast("Demo only — would download PDF (pp. " + pdf.dataset.pdf + ")");
return;
}
const doi = e.target.closest("[data-doi]");
if (doi) {
copyDoi(doi.dataset.doi);
}
});
tocEl.addEventListener("keydown", (e) => {
if ((e.key === "Enter" || e.key === " ") && e.target.dataset && e.target.dataset.doi) {
e.preventDefault();
copyDoi(e.target.dataset.doi);
}
});
function copyDoi(doi) {
const text = "https://doi.org/" + doi;
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(text).then(
() => toast("Copied DOI link to clipboard"),
() => toast("doi:" + doi)
);
} else {
toast("doi:" + doi);
}
}
// ----- Filtering -----
let accessFilter = "all";
function applyFilters() {
const q = searchInput.value.trim().toLowerCase();
let visibleTotal = 0;
document.querySelectorAll(".section").forEach((section) => {
let sectionVisible = 0;
section.querySelectorAll(".article").forEach((art) => {
const matchAccess =
accessFilter === "all" || art.dataset.access === accessFilter;
const matchSearch = !q || art.dataset.search.indexOf(q) !== -1;
const show = matchAccess && matchSearch;
art.hidden = !show;
if (show) sectionVisible++;
});
const counter = section.querySelector("[data-sec-count]");
counter.textContent =
sectionVisible + " article" + (sectionVisible === 1 ? "" : "s");
section.hidden = sectionVisible === 0;
visibleTotal += sectionVisible;
});
resultCount.textContent =
visibleTotal + " article" + (visibleTotal === 1 ? "" : "s");
emptyEl.hidden = visibleTotal !== 0;
}
document.querySelectorAll(".chip").forEach((chip) => {
chip.addEventListener("click", () => {
document.querySelectorAll(".chip").forEach((c) => {
c.classList.remove("is-active");
c.setAttribute("aria-pressed", "false");
});
chip.classList.add("is-active");
chip.setAttribute("aria-pressed", "true");
accessFilter = chip.dataset.filter;
applyFilters();
});
});
let searchTimer = null;
searchInput.addEventListener("input", () => {
clearTimeout(searchTimer);
searchTimer = setTimeout(applyFilters, 120);
});
document.getElementById("clearFilters").addEventListener("click", () => {
searchInput.value = "";
accessFilter = "all";
document.querySelectorAll(".chip").forEach((c) => {
const on = c.dataset.filter === "all";
c.classList.toggle("is-active", on);
c.setAttribute("aria-pressed", String(on));
});
applyFilters();
searchInput.focus();
});
// ----- Issue selector -----
const issueSelect = document.getElementById("issueSelect");
issueSelect.addEventListener("change", () => {
const label = issueSelect.options[issueSelect.selectedIndex].text;
if (issueSelect.value === "12-4") {
toast("Showing current issue: " + label);
} else {
toast("Demo only — archived issue: " + label);
}
});
// ----- Download full issue -----
document.getElementById("downloadIssue").addEventListener("click", () => {
toast("Demo only — would download full issue PDF (38.2 MB)");
});
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Journal of Computational Biophysics — Vol 12 · Issue 4</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="style.css" />
</head>
<body>
<a class="skip-link" href="#toc">Skip to table of contents</a>
<header class="masthead" role="banner">
<div class="masthead__inner">
<div class="masthead__brand">
<span class="masthead__mark" aria-hidden="true">JCB</span>
<div class="masthead__titles">
<h1 class="masthead__title">Journal of Computational Biophysics</h1>
<p class="masthead__sub">Open peer-reviewed research in molecular simulation & structural informatics</p>
<p class="masthead__issn">
<span class="mono">ISSN 2814-9970</span> ·
<span class="mono">eISSN 2814-9989</span> ·
Published by the Marlowe Institute Press
</p>
</div>
</div>
<div class="masthead__issue">
<label class="issue-select" for="issueSelect">
<span class="issue-select__label">Browse issue</span>
<select id="issueSelect" aria-label="Select volume and issue">
<option value="12-4" selected>Volume 12 · Issue 4 · June 2026</option>
<option value="12-3">Volume 12 · Issue 3 · April 2026</option>
<option value="12-2">Volume 12 · Issue 2 · February 2026</option>
<option value="12-1">Volume 12 · Issue 1 · December 2025</option>
<option value="11-6">Volume 11 · Issue 6 · October 2025</option>
</select>
</label>
</div>
</div>
</header>
<main class="layout">
<section class="issue-head" aria-labelledby="issueHeading">
<div class="issue-head__meta">
<p class="eyebrow mono">Current issue</p>
<h2 id="issueHeading" class="issue-head__title">Volume 12 · Issue 4</h2>
<p class="issue-head__date">June 2026 · pp. 401–518</p>
<p class="issue-head__lede">
This issue gathers advances in coarse-grained membrane modeling,
machine-learned force fields, and reproducibility tooling for
large-scale molecular dynamics. Eleven articles across four sections.
</p>
<div class="issue-head__stats" role="list">
<div class="stat" role="listitem"><span class="stat__num mono" id="statArticles">11</span><span class="stat__lab">articles</span></div>
<div class="stat" role="listitem"><span class="stat__num mono" id="statOA">7</span><span class="stat__lab">open access</span></div>
<div class="stat" role="listitem"><span class="stat__num mono">118</span><span class="stat__lab">pages</span></div>
</div>
<button class="btn btn--primary" id="downloadIssue" type="button">
<svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 3v10.6l3.3-3.3 1.4 1.4L12 17 7.3 11.7l1.4-1.4 3.3 3.3V3zM5 19h14v2H5z"/></svg>
Download full issue (PDF, 38.2 MB)
</button>
</div>
<figure class="cover" aria-labelledby="coverCap">
<div class="cover__art" role="img" aria-label="Issue cover: a lattice of lipid molecules rendered as concentric blue rings over a dark field.">
<span class="cover__journal">J. Comput. Biophys.</span>
<div class="cover__rings" aria-hidden="true">
<span></span><span></span><span></span><span></span>
</div>
<span class="cover__vol mono">VOL 12 · No 4</span>
</div>
<figcaption id="coverCap">
<strong>Figure 1.</strong> Cover art — coarse-grained lipid bilayer
self-assembly from the Okonkwo & Halvorsen study (pp. 432–451).
</figcaption>
</figure>
</section>
<div class="toolbar" role="region" aria-label="Filter articles">
<div class="toolbar__filters" role="group" aria-label="Filter by access">
<button class="chip is-active" data-filter="all" type="button" aria-pressed="true">All</button>
<button class="chip" data-filter="oa" type="button" aria-pressed="false">Open access</button>
<button class="chip" data-filter="closed" type="button" aria-pressed="false">Subscription</button>
</div>
<label class="search">
<svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M10 4a6 6 0 014.9 9.5l4.3 4.3-1.4 1.4-4.3-4.3A6 6 0 1110 4zm0 2a4 4 0 100 8 4 4 0 000-8z"/></svg>
<input id="searchInput" type="search" placeholder="Search titles, authors, keywords…" aria-label="Search articles" />
</label>
<div class="toolbar__count mono" id="resultCount" aria-live="polite">11 articles</div>
</div>
<div id="toc" class="toc">
<!-- Sections rendered by script.js -->
</div>
<p class="empty" id="emptyState" hidden>No articles match your filter. <button class="linkbtn" id="clearFilters" type="button">Clear filters</button></p>
</main>
<footer class="site-footer" role="contentinfo">
<p>Journal of Computational Biophysics · Marlowe Institute Press · Oxford & Cambridge, MA</p>
<p class="mono">DOI prefix 10.48391 · CC BY 4.0 for open-access content · Illustrative demo only</p>
</footer>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>Journal Issue Index
A complete table-of-contents page for an academic journal issue, modeled on the front matter of a peer-reviewed periodical. The masthead carries the journal title, print and electronic ISSNs, and the running “Volume 12 · Issue 4 · June 2026” line, alongside a volume/issue selector and an animated cover thumbnail with a numbered figure caption. A summary panel reports article and open-access counts and offers a “download full issue” action.
Articles are organized into type sections — Editorial, Research Articles,
Reviews, and Letters — each rendered from a structured data model in the script.
Every entry lists its title, authors, affiliation, page range, an open-access or
subscription badge, and a row of actions: an abstract toggle that smoothly
expands a styled abstract block with keywords, a PDF link, and a clickable DOI
that copies a resolvable https://doi.org/… link to the clipboard.
A toolbar adds live interactions: access-type filter chips (All / Open access / Subscription), a debounced keyword search across titles, authors, affiliations, and keywords, and per-section result counts that update as you filter. Empty states, a toast helper, keyboard-operable DOI controls, and a reduced-motion fallback keep the page accessible and responsive down to about 360px.
Illustrative UI only — fictional authors, data, and figures; not real scientific results.