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>
491 lines
19 KiB
HTML
491 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>AND ARCHIVE OF THE END OF MY ADDICTION | 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; }
|
||
.playlist-panel:nth-child(8) { animation-delay: 420ms; }
|
||
|
||
.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">AND ARCHIVE OF THE END OF MY ADDICTION</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">8 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">One of the most insidious and persistent addictions I have had to manage and overcome in my life, is my addiction to videos on screens. It began with TV after school, then videos on the computer, then YouTube. I realized my addiction before short form hit the dopamine receptors of a generation. Although that was because I was too poor to get caught by Vine like my friends at church. Noooo, my battle with content addiction has been long and fraught with failure. However, one of the most reliable methods I have found for curbing use, is to cultivate the act of curation. That is, document your habits, assess the content for value. Don't begin by making judgements. Just keep a record of what you watched and organize it by how valuable you think it is. From there, see how your choices of what to watch and when change. Learning to work with my brain instead of against it began by understanding my addiction to content. Anyway, here is a selection of playlists from that journey. There's some interesting stuff here, but future watchlists in other parts of this website will undoubtedly be better and more thoughtfully curated. - JL</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>MUSICAL MEANDERINGS</h2>
|
||
<span class="panel-number">PANEL 01</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OCZ9GbPdci0M63b1PcI1TVZ"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OCZ9GbPdci0M63b1PcI1TVZ" 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>FOOD CURIOS</h2>
|
||
<span class="panel-number">PANEL 02</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OCq5LsgL2EmoaP9dwlhu2go"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OCq5LsgL2EmoaP9dwlhu2go" 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>CURIOSITIES</h2>
|
||
<span class="panel-number">PANEL 03</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967ODwpT-Z-ej0dE4EcMIQirxe"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967ODwpT-Z-ej0dE4EcMIQirxe" 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>BAN CAN WATCH QUEUE</h2>
|
||
<span class="panel-number">PANEL 04</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OAuW_pFsPCtQyLp6nqoChHA"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OAuW_pFsPCtQyLp6nqoChHA" 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>NEW WATCH QUEUE</h2>
|
||
<span class="panel-number">PANEL 05</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OBOQgKPJdgeb_661OCc-IP_"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OBOQgKPJdgeb_661OCc-IP_" 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>UNSORTED MIXES</h2>
|
||
<span class="panel-number">PANEL 06</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OAdklUmXZk8RI7DYhRmMIxT"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OAdklUmXZk8RI7DYhRmMIxT" 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>WATCH IT AGAIN FROM TIME TO TIME</h2>
|
||
<span class="panel-number">PANEL 07</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OBfSGKNlj6nxh9E6J-Rzof5"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OBfSGKNlj6nxh9E6J-Rzof5" 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>MISCELLANY</h2>
|
||
<span class="panel-number">PANEL 08</span>
|
||
</div>
|
||
<div class="video-container">
|
||
<iframe
|
||
data-src="https://www.youtube.com/embed/videoseries?list=PLUby3nb967OAoUDyuAtKTSLCEgZkFwqdP"
|
||
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
||
allowfullscreen>
|
||
</iframe>
|
||
</div>
|
||
<a href="https://www.youtube.com/playlist?list=PLUby3nb967OAoUDyuAtKTSLCEgZkFwqdP" 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>
|