JL Kruger
c1a7098ebe
- Add target="_top" to all ← SPACE / back-to-root links so navigating back to index.html breaks out of the content iframe instead of loading it recursively inside itself (Images, Music, Watchlists hubs) - Remove all localStorage usage: visited-star tracking in index.html (resets each visit, no persistence without storage), and lightbox "show once" guards in all section pages (lightboxes now show on every load — Videos, Watchlists, Music). build.py templates updated so future generated pages stay clean. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
473 lines
17 KiB
HTML
473 lines
17 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>THE ANALOG FRONTIER | WATCHLISTS</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=Rambla:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
|
||
<style>
|
||
:root {
|
||
--bg-void: #04060b;
|
||
--text-warm: #e8d5b8;
|
||
--wl-teal: #2ac4b3;
|
||
--wl-green: #32dc8c;
|
||
--wl-toucan: #ffcf40;
|
||
--wl-teal-glow: rgba(42, 196, 179, 0.22);
|
||
--wl-green-glow: rgba(50, 220, 140, 0.22);
|
||
--wl-toucan-glow: rgba(255, 207, 64, 0.22);
|
||
--muted: rgba(232, 213, 184, 0.45);
|
||
}
|
||
|
||
* { box-sizing: border-box; margin: 0; padding: 0; border-radius: 0; }
|
||
|
||
body {
|
||
background-color: var(--bg-void);
|
||
color: var(--text-warm);
|
||
font-family: 'Rambla', sans-serif;
|
||
line-height: 1.5;
|
||
padding-top: 88px;
|
||
}
|
||
|
||
/* ── Sticky header ── */
|
||
.sticky-header {
|
||
position: fixed;
|
||
top: 0; left: 0; right: 0;
|
||
height: 72px;
|
||
background: var(--bg-void);
|
||
border-bottom: 2px solid var(--wl-teal);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 0 2rem;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.header-title {
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
color: var(--wl-toucan);
|
||
font-size: 1.1rem;
|
||
letter-spacing: -0.01em;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
max-width: 55%;
|
||
}
|
||
|
||
.header-nav {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2rem;
|
||
}
|
||
|
||
.nav-link {
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
text-decoration: none;
|
||
color: var(--wl-teal);
|
||
font-size: 0.85rem;
|
||
letter-spacing: 0.04em;
|
||
transition: color 100ms ease;
|
||
}
|
||
|
||
.nav-link:hover { color: var(--wl-green); }
|
||
|
||
.header-count {
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
color: var(--wl-green);
|
||
font-size: 0.78rem;
|
||
letter-spacing: 0.1em;
|
||
}
|
||
|
||
.menu-toggle {
|
||
display: none;
|
||
background: none;
|
||
border: 2px solid var(--wl-teal);
|
||
color: var(--wl-teal);
|
||
padding: 0.4rem 0.6rem;
|
||
font-size: 1.1rem;
|
||
cursor: pointer;
|
||
font-family: inherit;
|
||
transition: color 100ms ease, border-color 100ms ease;
|
||
}
|
||
|
||
.menu-toggle:hover { color: var(--wl-green); border-color: var(--wl-green); }
|
||
|
||
@media (max-width: 600px) {
|
||
.header-nav {
|
||
display: none;
|
||
flex-direction: column;
|
||
align-items: flex-start;
|
||
position: absolute;
|
||
top: 72px; left: 0; right: 0;
|
||
background: var(--bg-void);
|
||
padding: 1.25rem 2rem;
|
||
border-bottom: 2px solid var(--wl-teal);
|
||
gap: 0.75rem;
|
||
}
|
||
.header-nav.open { display: flex; }
|
||
.menu-toggle { display: block; }
|
||
.header-title { max-width: 65%; }
|
||
}
|
||
|
||
/* ── Lightbox ── */
|
||
#lightbox {
|
||
position: fixed;
|
||
inset: 0;
|
||
background: rgba(4, 6, 11, 0.92);
|
||
display: none;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 2000;
|
||
padding: 2rem;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.caption-box {
|
||
background: #080d10;
|
||
border: 2px solid var(--wl-teal);
|
||
border-top: 10px solid var(--wl-toucan);
|
||
border-left: 6px solid var(--wl-green);
|
||
max-width: 640px;
|
||
width: 100%;
|
||
max-height: 90vh;
|
||
overflow-y: auto;
|
||
padding: 2rem 2rem 1.5rem;
|
||
position: relative;
|
||
cursor: default;
|
||
}
|
||
|
||
.caption-close {
|
||
position: absolute;
|
||
top: 0.6rem;
|
||
right: 0.75rem;
|
||
background: none;
|
||
border: none;
|
||
color: var(--wl-teal);
|
||
font-family: 'Rambla', sans-serif;
|
||
font-size: 1.6rem;
|
||
font-weight: 700;
|
||
line-height: 1;
|
||
cursor: pointer;
|
||
padding: 0.1rem 0.3rem;
|
||
transition: color 100ms ease;
|
||
}
|
||
|
||
.caption-close:hover { color: var(--wl-toucan); }
|
||
|
||
.caption-text {
|
||
font-style: italic;
|
||
font-size: 1.05rem;
|
||
color: var(--text-warm);
|
||
margin-bottom: 1.25rem;
|
||
line-height: 1.65;
|
||
padding-right: 1.5rem;
|
||
}
|
||
|
||
.dismiss-hint {
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 0.62rem;
|
||
letter-spacing: 0.18em;
|
||
color: var(--muted);
|
||
text-align: center;
|
||
margin-top: 1.25rem;
|
||
}
|
||
|
||
/* ── Panels ── */
|
||
.container {
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
padding: 2rem 2rem 4rem;
|
||
}
|
||
|
||
@media (max-width: 600px) {
|
||
.container { padding: 1.5rem 1.25rem 3rem; }
|
||
}
|
||
|
||
@keyframes panelIn {
|
||
from { opacity: 0; transform: translateY(20px); }
|
||
to { opacity: 1; transform: translateY(0); }
|
||
}
|
||
|
||
.playlist-panel {
|
||
margin-bottom: 3.5rem;
|
||
border: 2px solid var(--border-color);
|
||
background: var(--bg-void);
|
||
position: relative;
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
|
||
animation: panelIn 350ms ease both;
|
||
}
|
||
|
||
.playlist-panel:nth-child(1) { animation-delay: 0ms; }
|
||
.playlist-panel:nth-child(2) { animation-delay: 60ms; }
|
||
.playlist-panel:nth-child(3) { animation-delay: 120ms; }
|
||
.playlist-panel:nth-child(4) { animation-delay: 180ms; }
|
||
.playlist-panel:nth-child(5) { animation-delay: 240ms; }
|
||
.playlist-panel:nth-child(6) { animation-delay: 300ms; }
|
||
.playlist-panel:nth-child(7) { animation-delay: 360ms; }
|
||
|
||
.panel-header {
|
||
background: var(--border-color);
|
||
padding: 0.75rem 1.25rem;
|
||
color: var(--bg-void);
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.panel-header h2 {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
margin: 0;
|
||
line-height: 1.2;
|
||
}
|
||
|
||
.panel-number {
|
||
font-size: 0.75rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
color: rgba(4, 6, 11, 0.75);
|
||
letter-spacing: 0.06em;
|
||
white-space: nowrap;
|
||
margin-left: 1rem;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.video-container {
|
||
position: relative;
|
||
padding-bottom: 56.25%;
|
||
height: 0;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.video-container iframe {
|
||
position: absolute;
|
||
top: 0; left: 0;
|
||
width: 100%; height: 100%;
|
||
border: 0;
|
||
}
|
||
|
||
.panel-teal { --border-color: var(--wl-teal); }
|
||
.panel-green { --border-color: var(--wl-green); }
|
||
.panel-toucan { --border-color: var(--wl-toucan); }
|
||
|
||
.playlist-link {
|
||
display: block;
|
||
padding: 0.85rem 1.25rem;
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: 0.9rem;
|
||
letter-spacing: 0.08em;
|
||
color: var(--border-color);
|
||
text-decoration: none;
|
||
border-top: 1px solid var(--border-color);
|
||
transition: background 100ms ease, color 100ms ease;
|
||
}
|
||
|
||
.playlist-link:hover {
|
||
background: var(--border-color);
|
||
color: var(--bg-void);
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
|
||
<header class="sticky-header">
|
||
<div class="header-title">THE ANALOG FRONTIER</div>
|
||
<button class="menu-toggle" id="menu-toggle">☰</button>
|
||
<nav class="header-nav" id="header-nav">
|
||
<a href="watchlists-hub.html" class="nav-link">← WATCHLISTS</a>
|
||
<span class="header-count">7 PLAYLISTS</span>
|
||
</nav>
|
||
</header>
|
||
|
||
<div id="lightbox" role="dialog" aria-modal="true" aria-label="Introduction">
|
||
<div class="caption-box">
|
||
<button class="caption-close" id="caption-close" aria-label="Close">×</button>
|
||
<p class="caption-text">Before everything was a file, sound was a voltage. Before everything was a stream, images were magnetic. The analog world didn't disappear — it got archived, obsessed over, and loved harder by the people who understood what was lost. This is a collection of playlists about those machines, that music, and the humans who still speak their language.</p>
|
||
<p class="dismiss-hint">CLICK ANYWHERE TO DISMISS</p>
|
||
</div>
|
||
</div>
|
||
<main class="container">
|
||
|
||
<section class="playlist-panel panel-teal">
|
||
<div class="panel-header">
|
||
<h2>ELECTRONIC MUSIC AND SYNTHESIZER DOCUMENTARIES</h2>
|
||
<span class="panel-number">PANEL 01</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PL9IOjFRFjrOlaSN20n8BVup9Sw5pECF_N"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PL9IOjFRFjrOlaSN20n8BVup9Sw5pECF_N" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-green">
|
||
<div class="panel-header">
|
||
<h2>VINTAGE SYNTH MUSIC</h2>
|
||
<span class="panel-number">PANEL 02</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PL705B75747F552D89"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PL705B75747F552D89" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-toucan">
|
||
<div class="panel-header">
|
||
<h2>KOSMISCHE WELLEN</h2>
|
||
<span class="panel-number">PANEL 03</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLTESZvBAvs-21WEss2-tAc88YUVJvbHjt"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLTESZvBAvs-21WEss2-tAc88YUVJvbHjt" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-teal">
|
||
<div class="panel-header">
|
||
<h2>ANALOG SYNTHS</h2>
|
||
<span class="panel-number">PANEL 04</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLGPon0XahgRzdHHRcXIXOTYncuiTmihTQ"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLGPon0XahgRzdHHRcXIXOTYncuiTmihTQ" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-green">
|
||
<div class="panel-header">
|
||
<h2>VIDEO SYNTH</h2>
|
||
<span class="panel-number">PANEL 05</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLnwRAEdhoHKvgCHahY_Geef80sn98Q1yq"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLnwRAEdhoHKvgCHahY_Geef80sn98Q1yq" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-toucan">
|
||
<div class="panel-header">
|
||
<h2>ANALOG AMBIENT: WARM SYNTHS</h2>
|
||
<span class="panel-number">PANEL 06</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLSui2JfAn3uzFXSPuBOFdyUMOhjSQK_0O"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLSui2JfAn3uzFXSPuBOFdyUMOhjSQK_0O" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
|
||
<section class="playlist-panel panel-teal">
|
||
<div class="panel-header">
|
||
<h2>OLD HI-TECH</h2>
|
||
<span class="panel-number">PANEL 07</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PL1Qu_o1uczDrmRp0aaTDPfIChzMG3BsnG"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PL1Qu_o1uczDrmRp0aaTDPfIChzMG3BsnG" target="_blank" rel="noopener" class="playlist-link">
|
||
→ OPEN FULL PLAYLIST ON YOUTUBE
|
||
</a>
|
||
</section>
|
||
</main>
|
||
|
||
<script>
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
|
||
// Lightbox: show on first load
|
||
const lightbox = document.getElementById('lightbox');
|
||
lightbox.style.display = 'flex';
|
||
|
||
function closeLightbox() { lightbox.style.display = 'none'; }
|
||
|
||
lightbox.addEventListener('click', (e) => {
|
||
if (e.target === lightbox) closeLightbox();
|
||
});
|
||
document.getElementById('caption-close').addEventListener('click', closeLightbox);
|
||
document.addEventListener('keydown', (e) => {
|
||
if (e.key === 'Escape') closeLightbox();
|
||
});
|
||
|
||
// Mobile nav toggle
|
||
const menuToggle = document.getElementById('menu-toggle');
|
||
const headerNav = document.getElementById('header-nav');
|
||
|
||
menuToggle.addEventListener('click', (e) => {
|
||
e.stopPropagation();
|
||
headerNav.classList.toggle('open');
|
||
});
|
||
|
||
document.addEventListener('click', (e) => {
|
||
if (!headerNav.contains(e.target) && e.target !== menuToggle) {
|
||
headerNav.classList.remove('open');
|
||
}
|
||
});
|
||
|
||
// Lazy-load iframes via IntersectionObserver
|
||
const observer = new IntersectionObserver((entries, obs) => {
|
||
entries.forEach(entry => {
|
||
if (entry.isIntersecting) {
|
||
const iframe = entry.target;
|
||
const src = iframe.getAttribute('data-src');
|
||
if (src) {
|
||
iframe.setAttribute('src', src);
|
||
iframe.removeAttribute('data-src');
|
||
}
|
||
obs.unobserve(iframe);
|
||
}
|
||
});
|
||
}, { rootMargin: '200px 0px' });
|
||
|
||
document.querySelectorAll('iframe[data-src]').forEach(
|
||
iframe => observer.observe(iframe)
|
||
);
|
||
});
|
||
</script>
|
||
|
||
</body>
|
||
</html>
|