← back to Ventura Corridor
public/timeline.html
166 lines
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ventura Boulevard · timeline</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>(function(){try{var t=localStorage.getItem('vc-theme');document.documentElement.dataset.theme=(t==='light'||t==='dark')?t:'dark';}catch(e){document.documentElement.dataset.theme='dark';}})();</script>
<link rel="stylesheet" href="/theme.css">
<script src="/theme.js" defer></script>
<style>
:root {
--noir: #0a0a0c; --noir-rise: #131316; --ink: #f0ece2;
--ink-mute: #888475; --metal: #b89968; --metal-glow: #d4b683;
--rule: #2a2622; --rule-hot: #46392c;
--serif: 'Cormorant Garamond', 'Times New Roman', serif;
--sans: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
--mono: 'JetBrains Mono', ui-monospace, monospace;
}
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Inter:wght@200;300;400;600&display=swap');
html, body { margin: 0; background: var(--noir); color: var(--ink); font-family: var(--sans); font-weight: 300; }
* { box-sizing: border-box; }
header {
position: sticky; top: 0; z-index: 10;
background: linear-gradient(180deg, rgba(10,10,12,.97) 70%, rgba(10,10,12,0));
padding: 22px 40px 16px; border-bottom: 1px solid var(--rule);
display: flex; justify-content: space-between; align-items: baseline; gap: 24px;
}
header h1 { font-family: var(--serif); font-weight: 400; font-size: 28px; letter-spacing: -0.01em; margin: 0; }
header h1 em { font-style: italic; color: var(--metal); }
.sub { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-mute); margin-top: 4px; }
nav.tabs { display: flex; gap: 4px; flex-wrap: wrap; }
nav.tabs a { font-size: 10px; letter-spacing: .26em; text-transform: uppercase;
color: var(--ink-mute); text-decoration: none; padding: 6px 12px; border: 1px solid var(--rule); }
nav.tabs a.active, nav.tabs a:hover { color: var(--metal); border-color: var(--metal); }
.hero {
padding: 80px 40px 60px; text-align: center;
background: radial-gradient(ellipse at center top, rgba(184,153,104,0.08), transparent 70%);
border-bottom: 1px solid var(--rule);
}
.hero h2 { font-family: var(--serif); font-weight: 300; font-style: italic; font-size: 56px; letter-spacing: -0.02em; margin: 0 0 14px; line-height: 1.05; }
.hero h2 em { color: var(--metal); font-style: normal; }
.hero p { color: var(--ink-mute); max-width: 640px; margin: 0 auto; font-family: var(--serif); font-style: italic; font-size: 16px; line-height: 1.5; }
/* Vertical spine + alternating cards */
.timeline {
position: relative; padding: 60px 0 120px; max-width: 1100px; margin: 0 auto;
}
.spine { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--rule); transform: translateX(-0.5px); }
.row { position: relative; display: grid; grid-template-columns: 1fr 80px 1fr; align-items: center; margin-bottom: 18px; }
.row.even .card-wrap { grid-column: 1; padding-right: 32px; text-align: right; }
.row.even .meta-wrap { grid-column: 3; padding-left: 32px; }
.row.odd .card-wrap { grid-column: 3; padding-left: 32px; text-align: left; }
.row.odd .meta-wrap { grid-column: 1; padding-right: 32px; text-align: right; }
.year-pin {
grid-column: 2; place-self: center; z-index: 2;
width: 64px; height: 64px; border: 1px solid var(--metal); background: var(--noir);
display: flex; align-items: center; justify-content: center;
color: var(--metal); font-family: var(--serif); font-style: italic; font-size: 20px;
font-variant-numeric: tabular-nums; transition: all 220ms ease;
}
.row:hover .year-pin { background: rgba(184,153,104,0.1); transform: scale(1.05); }
.year-pin.unknown { color: var(--ink-mute); border-color: var(--rule); font-size: 11px; letter-spacing: .2em; font-style: normal; font-family: var(--sans); }
.card {
background: var(--noir-rise); border: 1px solid var(--rule);
padding: 18px 22px; transition: all 200ms ease; display: inline-block; max-width: 100%;
}
.card:hover { border-color: var(--metal); background: var(--noir); }
.card .badge { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--metal); margin-bottom: 6px; }
.card .title { font-family: var(--serif); font-style: italic; font-size: 22px; line-height: 1.2; margin: 0 0 8px; color: var(--ink); }
.card .title a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.card .title a:hover { border-bottom-color: var(--metal); }
.card .snippet { font-size: 12px; line-height: 1.55; color: var(--ink-mute); font-family: var(--serif); font-style: italic; margin-top: 6px; }
.card .credit { font-size: 9px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-mute); margin-top: 8px; }
.card .credit em { color: var(--metal); font-style: normal; }
.meta-wrap .kind { font-size: 9px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink-mute); }
.card .thumb-wrap { margin: 8px 0 0; max-width: 380px; overflow: hidden; }
.row.odd .card .thumb-wrap { margin-left: 0; }
.row.even .card .thumb-wrap { margin-left: auto; }
.card .thumb { width: 100%; height: auto; display: block; filter: grayscale(0.3) contrast(1.05); transition: filter 300ms ease; }
.card:hover .thumb { filter: grayscale(0) contrast(1); }
/* Mobile: collapse to single column on the right of the spine */
@media (max-width: 720px) {
.timeline { padding-left: 64px; padding-right: 16px; }
.spine { left: 32px; }
.row { display: block; }
.row .year-pin { position: absolute; left: 0; top: 0; transform: translateX(-50%); }
.row .card-wrap, .row .meta-wrap { padding: 0 0 0 32px !important; text-align: left !important; grid-column: auto !important; }
.row .meta-wrap { padding-top: 4px !important; }
}
footer {
padding: 24px 40px 40px; border-top: 1px solid var(--rule);
font-family: var(--serif); font-style: italic; color: var(--ink-mute); font-size: 12px; text-align: center;
}
</style>
</head>
<body>
<header>
<div>
<h1>Ventura <em>Boulevard</em> · timeline</h1>
<div class="sub">a cultural reel — films, television, archival photographs</div>
</div>
<nav class="tabs" aria-label="Surface navigation">
<a href="/">2D map</a>
<a href="/3d.html">3D corridor</a>
<a href="/wall.html">Wall</a>
<a href="/timeline.html" class="active" aria-current="page">Timeline</a>
<a href="/pantone.html">Pantone</a>
<a href="/headlines.html">Voices</a>
<a href="/tongues.html">Tongues</a>
<a href="/chains.html">Chains</a>
<a href="/atlas.html">Atlas</a>
<a href="/eulogy.html">Eulogy</a>
<span class="theme-toggle-host" style="display:inline-flex;align-items:center;margin-left:6px"></span>
</nav>
</header>
<section class="hero">
<h2>One street, <em>a hundred years</em>.</h2>
<p>Every film and television scene that named the boulevard, paired with public-domain photographs from Wikimedia Commons. Cinema, sitcoms, news, signage, neon at night — what the corridor has rendered for the screen.</p>
</section>
<div class="timeline">
<div class="spine"></div>
<div id="rows"></div>
</div>
<footer>Cultural artifacts · public-domain or CC-licensed · sources cited per item.</footer>
<script>
function escapeHtml(s) {
return String(s ?? '').replace(/[&<>"']/g, c => ({ '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' }[c]));
}
function kindLabel(item) {
if (item.type === 'photo') return 'photograph';
if (item.kind === 'tv') return 'television';
if (item.kind === 'music_video') return 'music video';
return 'film';
}
fetch('/api/timeline').then(r => r.json()).then(data => {
const rows = document.getElementById('rows');
const items = data.items || [];
rows.innerHTML = items.map((item, i) => {
const odd = i % 2 === 1;
const yr = item.year ? `<div class="year-pin">${item.year}</div>` : `<div class="year-pin unknown">undated</div>`;
const cardInner = item.type === 'film'
? `<div class="badge">${kindLabel(item)}</div>
<h3 class="title"><a href="${item.link}" target="_blank" rel="noopener">${escapeHtml(item.title)}</a></h3>
${item.snippet ? `<p class="snippet">"${escapeHtml(item.snippet)}"</p>` : ''}`
: `<div class="badge">photograph</div>
<h3 class="title"><a href="${item.link}" target="_blank" rel="noopener">${escapeHtml(item.title)}</a></h3>
${item.thumb ? `<div class="thumb-wrap"><img class="thumb" src="${item.thumb}" alt="${escapeHtml(item.title)}" loading="lazy"></div>` : ''}
<div class="credit">${escapeHtml(item.artist || 'unknown')} · <em>${escapeHtml(item.license || 'public domain')}</em></div>`;
return `
<div class="row ${odd ? 'odd' : 'even'}">
<div class="card-wrap"><div class="card">${cardInner}</div></div>
${yr}
<div class="meta-wrap"><div class="kind">${kindLabel(item)}</div></div>
</div>`;
}).join('');
}).catch(e => {
document.getElementById('rows').innerHTML = `<div style="text-align:center;padding:80px;color:var(--ink-mute);font-family:var(--serif);font-style:italic">Could not load timeline data: ${e.message}</div>`;
});
</script>
</body>
</html>