JL Kruger
0d84daea6a
- Wire all new PlaylistPirate-generated pages into playlists.html hub - Update subtitle count (4 → 21 playlists, 269 → 1601 tracks) - Add missing back-link to ../index.html with target="_top" - Cards sorted alphabetically; eclectica-experimenti updated Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1012 lines
54 KiB
HTML
1012 lines
54 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>All This Stuff On The Wagon | PLAYLISTS</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=Faculty+Glyphic&family=Rambla:wght@400;700&family=Share+Tech+Mono&display=swap" rel="stylesheet">
|
|
<style>
|
|
|
|
:root {
|
|
--bg-void: #04060b;
|
|
--text-warm: #e8d5b8;
|
|
--text-muted: #7a6f5e;
|
|
--fp: #ff3300;
|
|
--fb: #ff6633;
|
|
--fd: #cc2200;
|
|
--fg: rgba(255,51,0,0.18);
|
|
}
|
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
body {
|
|
background: var(--bg-void);
|
|
color: var(--text-warm);
|
|
font-family: 'Rambla', sans-serif;
|
|
line-height: 1.5; min-height: 100vh;
|
|
}
|
|
|
|
header {
|
|
position: sticky; top: 0; z-index: 100;
|
|
background: var(--bg-void);
|
|
border-bottom: 1px solid var(--fd);
|
|
padding: 1rem 2rem;
|
|
display: flex; align-items: center;
|
|
justify-content: space-between; gap: 2rem;
|
|
}
|
|
.hd-main { display: flex; align-items: baseline; gap: 1.5rem; flex-grow: 1; min-width: 0; }
|
|
header h1 {
|
|
font-family: 'Faculty Glyphic', sans-serif; color: var(--fp);
|
|
font-size: 2rem; font-weight: normal;
|
|
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
|
|
}
|
|
.hd-meta {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--text-muted); font-size: 0.9rem;
|
|
text-transform: uppercase; white-space: nowrap;
|
|
}
|
|
.nav-links { display: flex; gap: 1.5rem; }
|
|
.back-link {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--fp); text-decoration: none;
|
|
font-size: 1rem; white-space: nowrap;
|
|
transition: color 100ms ease;
|
|
}
|
|
.back-link:hover { color: var(--fb); }
|
|
.menu-toggle {
|
|
display: none; background: none;
|
|
border: 1px solid var(--fp); color: var(--fp);
|
|
padding: 0.5rem; font-family: 'Share Tech Mono', monospace;
|
|
cursor: pointer; font-size: 1.2rem;
|
|
}
|
|
@media (max-width: 640px) {
|
|
header { padding: 1rem; }
|
|
header h1 { font-size: 1.5rem; }
|
|
.menu-toggle { display: block; }
|
|
.nav-links {
|
|
display: none; position: absolute;
|
|
top: 100%; left: 0; right: 0;
|
|
background: var(--bg-void);
|
|
flex-direction: column; padding: 1rem;
|
|
border-bottom: 1px solid var(--fd);
|
|
}
|
|
.nav-links.open { display: flex; }
|
|
}
|
|
.track-list { max-width: 1000px; margin: 2rem auto; padding: 0 1rem 5rem; }
|
|
.track-card {
|
|
display: flex; flex-direction: column;
|
|
border-left: 1px solid var(--fd);
|
|
margin-bottom: 0.5rem; position: relative;
|
|
transition: background 100ms ease, border-color 100ms ease;
|
|
}
|
|
.track-card::after {
|
|
content: ''; position: absolute;
|
|
bottom: -0.25rem; left: 0; right: 0;
|
|
height: 1px; background: var(--fd); opacity: 0.1;
|
|
}
|
|
.track-card:hover { background: var(--fg); border-color: var(--fp); }
|
|
.track-card.active { border-color: var(--fp); }
|
|
.track-row { display: flex; padding: 1.25rem 1.5rem; gap: 1.5rem; }
|
|
.zone-l {
|
|
width: 2.5rem; flex-shrink: 0;
|
|
display: flex; align-items: flex-start; padding-top: 0.2rem;
|
|
}
|
|
.track-num {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--text-muted); font-size: 0.95rem;
|
|
}
|
|
.zone-r { flex-grow: 1; min-width: 0; }
|
|
.track-name {
|
|
font-family: 'Rambla', sans-serif; font-weight: 700;
|
|
font-size: 1.1rem; color: var(--text-warm); margin-bottom: 0.2rem;
|
|
}
|
|
.artist-name {
|
|
font-family: 'Rambla', sans-serif; font-size: 0.95rem;
|
|
color: var(--fp); margin-bottom: 0.25rem;
|
|
}
|
|
.album-meta {
|
|
font-family: 'Share Tech Mono', monospace;
|
|
font-size: 0.7rem; color: var(--text-muted);
|
|
text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.75rem;
|
|
}
|
|
.links-row { display: flex; flex-wrap: wrap; gap: 1rem; }
|
|
.tl {
|
|
font-family: 'Share Tech Mono', monospace; font-size: 0.75rem;
|
|
color: var(--fp); text-decoration: none;
|
|
transition: color 100ms ease; cursor: pointer;
|
|
background: none; border: none; padding: 0;
|
|
}
|
|
.tl:hover { color: var(--fb); }
|
|
.tl.na { color: var(--text-muted); cursor: default; pointer-events: none; }
|
|
.tl.sp { color: #1db954; }
|
|
.tl.sp:hover { color: #1ed760; }
|
|
.embed-wrap {
|
|
display: none; width: 100%;
|
|
background: var(--fg); border-top: 1px solid var(--fd); padding: 1rem;
|
|
}
|
|
.track-card.active .embed-wrap { display: block; }
|
|
.embed-ratio { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; }
|
|
.embed-ratio iframe {
|
|
position: absolute; top: 0; left: 0;
|
|
width: 100%; height: 100%; border: 0;
|
|
}
|
|
@media (max-width: 480px) {
|
|
.track-row { padding: 1rem; gap: 1rem; }
|
|
}
|
|
footer {
|
|
margin-top: 5rem; padding: 2rem;
|
|
border-top: 1px solid var(--fd);
|
|
font-family: 'Share Tech Mono', monospace;
|
|
color: var(--text-muted); font-size: 0.8rem; text-align: center;
|
|
}
|
|
footer a { color: var(--fp); text-decoration: none; }
|
|
footer a:hover { color: var(--fb); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<div class="hd-main">
|
|
<h1>All This Stuff On The Wagon</h1>
|
|
<span class="hd-meta">33 TRACKS • 33 EMBEDDED</span>
|
|
</div>
|
|
<button class="menu-toggle" id="mt">☰</button>
|
|
<nav class="nav-links" id="nl">
|
|
<a href="playlists.html" class="back-link">← Playlists</a>
|
|
</nav>
|
|
</header>
|
|
<main class="track-list">
|
|
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">01</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">The Warrior's Code</div>
|
|
<div class="artist-name">Dropkick Murphys</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/1b271f4b-099d-4920-b9b1-e45506330459" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="PPC0kTWaE7I">[YOUTUBE]</button>
|
|
<a href="http://www.dropkickmurphys.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/6ivzLSDw82LpxXfToyb0He" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/PPC0kTWaE7I"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">02</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Flux</div>
|
|
<div class="artist-name">Bloc Party</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/c54914c7-2988-421f-a37f-ffdcdf5486a2" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="ttcboE1GrNg">[YOUTUBE]</button>
|
|
<a href="http://blocparty.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/56J3j5Rm1RrHPgbrTvhOz0" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/ttcboE1GrNg"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">03</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Reverend</div>
|
|
<div class="artist-name">Pearl and the Beard</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/3b728fa8-f686-4282-a14e-18125a77646c" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="3mPnvszPpcg">[YOUTUBE]</button>
|
|
<a href="https://www.discogs.com/artist/2268927" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/4caZiakzpsozXUVse48D5S" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/3mPnvszPpcg"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">04</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Take Back The Power</div>
|
|
<div class="artist-name">The Interrupters</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/67cd2d51-ac76-407b-8bc6-31589324aba8" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="q7Ol-YDS4Jc">[YOUTUBE]</button>
|
|
<a href="http://www.wearetheinterrupters.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/6aPyTOZZheIVT5q1TVlRYD" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/q7Ol-YDS4Jc"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">05</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Friday I'm In Love</div>
|
|
<div class="artist-name">The Cure</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/29bdeca4-fc09-4fc5-a393-6500472f2b84" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="mGgMZpGYiy8">[YOUTUBE]</button>
|
|
<a href="https://www.thecure.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/4QlzkaRHtU8gAdwqjWmO8n" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/mGgMZpGYiy8"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">06</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Doused</div>
|
|
<div class="artist-name">DIIV</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/ed8ee6e6-20a7-4bff-9af6-4458a1a2e875" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="KI79GPXAICM">[YOUTUBE]</button>
|
|
<a href="https://diiv.net/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/4QDbzpmRA6atTEEE2W7j7k" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/KI79GPXAICM"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">07</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Rebel Rebel - 2016 Remaster</div>
|
|
<div class="artist-name">David Bowie</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/11bd860a-4447-4140-813d-64834ae02ca8" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="DJxCsVcZL2I">[YOUTUBE]</button>
|
|
<a href="https://www.davidbowie.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/2EC9IJj7g0mN1Q5VrZkiYY" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/DJxCsVcZL2I"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">08</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Gypsy Eyes</div>
|
|
<div class="artist-name">Jimi Hendrix</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/073ccb86-8594-463a-af18-7517a7c239dc" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="QecC_u8WKbU">[YOUTUBE]</button>
|
|
<a href="https://www.facebook.com/TheJimiHendrixExperience" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/1DfWmv1eJU1a9tuGpqKGFP" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/QecC_u8WKbU"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">09</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Be OK</div>
|
|
<div class="artist-name">BAND-MAID</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/d150f3a3-ce64-40a5-957f-b1dc4e46adc1" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="roSAA5OoUfU">[YOUTUBE]</button>
|
|
<a href="https://bandmaid.tokyo/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/2Q0OEL83plWR3hej9obTcW" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/roSAA5OoUfU"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">10</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Run For Cover</div>
|
|
<div class="artist-name">The Killers</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/f7679a2c-77b4-439b-9b3d-d5e8c42dc64e" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="XO7JGfqPB0s">[YOUTUBE]</button>
|
|
<a href="https://www.thekillersmusic.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/5NAiPIEzxAexFE3ucV18Q8" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/XO7JGfqPB0s"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">11</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Skeleton Jar</div>
|
|
<div class="artist-name">Youth Group</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/2cae3076-068c-4094-80b7-01f64ad78432" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="ah_d_ZzW4m4">[YOUTUBE]</button>
|
|
<a href="http://www.youthgroup.com.au/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/7GJiQNNG7hJ0pZ7y25eEBi" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/ah_d_ZzW4m4"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">12</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Breakfast In America - Remastered 2010</div>
|
|
<div class="artist-name">Supertramp</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/da4b050d-a32a-4159-aee9-77e1fc7f3e13" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="D6bA59wDgYE">[YOUTUBE]</button>
|
|
<a href="https://supertramp.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/4a5pNRjwmzYQuEY1E7O6pj" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/D6bA59wDgYE"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">13</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Turn Up Your Radio ('95) - Remaster 2005</div>
|
|
<div class="artist-name">The Master's Apprentices, Hoodoo Gurus</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<span class="tl na">[MUSICBRAINZ]</span>
|
|
<button class="tl yt-toggle" data-vid="OYa7ziJjJZA">[YOUTUBE]</button>
|
|
<span class="tl na">[ARTIST]</span>
|
|
<a href="https://open.spotify.com/track/590O2XlWTyjKsT7rJb0hkZ" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/OYa7ziJjJZA"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">14</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Chelsea Dagger</div>
|
|
<div class="artist-name">The Fratellis</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/511dc5b3-9b9f-4850-b8c8-cb2543ca901f" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="sEXHeTcxQy4">[YOUTUBE]</button>
|
|
<a href="https://thefratellis.co.uk/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/52fnLN02thRhTnbzVZzdqq" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/sEXHeTcxQy4"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">15</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">She Moves In Her Own Way</div>
|
|
<div class="artist-name">The Kooks</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/2b16e0d8-317c-456a-9344-69614c709faf" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="pquhYpGHrlw">[YOUTUBE]</button>
|
|
<a href="https://www.thekooks.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/5xoUgPXbMNUmoHU0Enwtwq" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/pquhYpGHrlw"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">16</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Enjoy the Silence</div>
|
|
<div class="artist-name">Depeche Mode</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/8caee4aa-bc6e-454d-b8ab-16695a398c75" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="aGSKrC7dGcY">[YOUTUBE]</button>
|
|
<a href="https://www.depechemode.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/0yp3TvJNlG50Q4tAHWNCRm" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/aGSKrC7dGcY"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">17</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Time</div>
|
|
<div class="artist-name">Hootie & The Blowfish</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/28aeff1b-45f1-4e17-9e00-d087f7c954ca" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="oFLysouG86I">[YOUTUBE]</button>
|
|
<a href="http://www.hootie.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/1N0UflnZhn7xOkrN2l8zxx" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/oFLysouG86I"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">18</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Scotty Doesn't Know</div>
|
|
<div class="artist-name">Lustra</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/f91299d0-7bba-4269-ad3e-b7ed6adfc5d6" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="lcEkS9tcIjg">[YOUTUBE]</button>
|
|
<a href="https://www.youtube.com/user/Lustra17" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/1LkoYGxmYpO6QSEvY5C0Zl" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/lcEkS9tcIjg"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">19</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Promise</div>
|
|
<div class="artist-name">Eve 6</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/1d94e5f5-951c-4ffa-92d0-0f4f2ca54b72" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="sF5O0qH4LLQ">[YOUTUBE]</button>
|
|
<a href="http://www.eve6.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/5mqEL5pgnDCcWtTWpAofIV" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/sF5O0qH4LLQ"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">20</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Love Will Tear Us Apart - 2020 Remaster</div>
|
|
<div class="artist-name">Joy Division</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/2afa76b8-7857-40dc-97a8-2c6f457becb4" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="72LvPb9kZ88">[YOUTUBE]</button>
|
|
<a href="https://www.joydivisionofficial.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/34iOH7LY3vme5rQxsVILZ4" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/72LvPb9kZ88"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">21</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Ievan Polkka</div>
|
|
<div class="artist-name">Korpiklaani</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/4076b7c9-0ec7-4b34-b04d-c7f98ad410dd" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="0LfT5qJH2zc">[YOUTUBE]</button>
|
|
<a href="https://www.korpiklaani.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/0iOQiZ4u83IDrufOZGaWld" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/0LfT5qJH2zc"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">22</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Ocean Avenue</div>
|
|
<div class="artist-name">Yellowcard</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/485c24bb-6896-42c4-9432-e4e136963193" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="X9fLbfzCqWw">[YOUTUBE]</button>
|
|
<a href="https://www.yellowcardband.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/23oxJmDc1V9uLUSmN2LIvx" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/X9fLbfzCqWw"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">23</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">In Too Deep</div>
|
|
<div class="artist-name">Sum 41</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/1a987223-78db-4a67-87a3-0cb9eb3c3c10" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="emGri7i8Y2Y">[YOUTUBE]</button>
|
|
<a href="http://www.sum41.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/1HNE2PX70ztbEl6MLxrpNL" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/emGri7i8Y2Y"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">24</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Joker And The Thief</div>
|
|
<div class="artist-name">Wolfmother</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/49f4625d-bdd9-4302-bd04-cf6f788fa104" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="3afXXsJwYZo">[YOUTUBE]</button>
|
|
<a href="http://www.wolfmother.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/7ISL3LO8AWP3fKIXunvqTa" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/3afXXsJwYZo"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">25</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Feel Good Inc.</div>
|
|
<div class="artist-name">Gorillaz, De La Soul</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/5004ea88-6c7e-4096-a89f-b24e358408ee" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="HyHNuVaZJ-k">[YOUTUBE]</button>
|
|
<a href="https://www.gorillaz.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/0d28khcov6AiegSCpG5TuT" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/HyHNuVaZJ-k"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">26</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">King for a Day</div>
|
|
<div class="artist-name">Green Day</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/129a0e28-e92f-4db4-88f5-5dcf4bdd7752" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="Sw50Ki6slN4">[YOUTUBE]</button>
|
|
<a href="https://greenday.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/3b2Tnh3Dd9ahRoNm28RfNM" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/Sw50Ki6slN4"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">27</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Bad Habit</div>
|
|
<div class="artist-name">The Offspring</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/2aa3cdaa-a46a-40f7-8f66-9db4d2591524" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="U43XOSiKfqM">[YOUTUBE]</button>
|
|
<a href="https://www.offspring.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/5tFzUj1jV09bo4wBQWSbDl" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/U43XOSiKfqM"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">28</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">"Heroes" - 2017 Remaster</div>
|
|
<div class="artist-name">David Bowie</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/722190f8-f718-482f-a8bc-a8d479426a30" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="44FId4BpMx0">[YOUTUBE]</button>
|
|
<a href="https://www.davidbowie.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/7Jh1bpe76CNTCgdgAdBw4Z" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/44FId4BpMx0"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">29</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Los Calientes</div>
|
|
<div class="artist-name">Babasonicos</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/ebe59747-499e-42bb-8709-bd846e091718" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="4AVJ7Cxi7KA">[YOUTUBE]</button>
|
|
<a href="http://www.babasonicos.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/7L2arBxHMxVXbWQzaHKgnY" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/4AVJ7Cxi7KA"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">30</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Freedom</div>
|
|
<div class="artist-name">Paddy And The Rats</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<span class="tl na">[MUSICBRAINZ]</span>
|
|
<button class="tl yt-toggle" data-vid="O13OfiFXcB4">[YOUTUBE]</button>
|
|
<span class="tl na">[ARTIST]</span>
|
|
<a href="https://open.spotify.com/track/20ZPFGWFDdCehIlCRBSene" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/O13OfiFXcB4"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">31</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Seven Nation Army</div>
|
|
<div class="artist-name">The White Stripes</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/24cc8311-98fd-423a-bed1-97728f5eabc5" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="0J2QdDbelmY">[YOUTUBE]</button>
|
|
<a href="http://www.whitestripes.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/3ctoHckjyd13eBi2IDw2Ip" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/0J2QdDbelmY"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">32</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">Sunday</div>
|
|
<div class="artist-name">Bloc Party</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<span class="tl na">[MUSICBRAINZ]</span>
|
|
<button class="tl yt-toggle" data-vid="uJxbL8tLo6s">[YOUTUBE]</button>
|
|
<span class="tl na">[ARTIST]</span>
|
|
<a href="https://open.spotify.com/track/6yrVS6mQPUSRdc4KHTRWJV" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/uJxbL8tLo6s"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
<article class="track-card">
|
|
<div class="track-row">
|
|
<div class="zone-l">
|
|
<span class="track-num">33</span>
|
|
</div>
|
|
<div class="zone-r">
|
|
<div class="track-name">In the End</div>
|
|
<div class="artist-name">Linkin Park</div>
|
|
<div class="album-meta"></div>
|
|
<div class="links-row">
|
|
<a href="https://musicbrainz.org/recording/9d70086c-5d7a-4e7f-b1ed-c53c4b11310f" class="tl" target="_blank" rel="noopener">[MUSICBRAINZ]</a>
|
|
<button class="tl yt-toggle" data-vid="eVTXPUF4Oz4">[YOUTUBE]</button>
|
|
<a href="https://www.linkinpark.com/" class="tl" target="_blank" rel="noopener">[ARTIST]</a>
|
|
<a href="https://open.spotify.com/track/3tSmXSxaAnU1EPGKa6NytH" class="tl sp" target="_blank" rel="noopener">[SPOTIFY]</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="embed-wrap">
|
|
<div class="embed-ratio">
|
|
<iframe src="" data-src="https://www.youtube.com/embed/eVTXPUF4Oz4"
|
|
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
allowfullscreen></iframe>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</main>
|
|
<footer>
|
|
Playlists from <a href="https://open.spotify.com" target="_blank" rel="noopener">Spotify</a>
|
|
• Recording data via <a href="https://musicbrainz.org" target="_blank" rel="noopener">MusicBrainz</a>
|
|
• — SINGULAR PARTICULAR SPACE —
|
|
</footer>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const mt = document.getElementById('mt');
|
|
const nl = document.getElementById('nl');
|
|
mt.addEventListener('click', () => {
|
|
nl.classList.toggle('open');
|
|
mt.textContent = nl.classList.contains('open') ? '\u2715' : '\u2630';
|
|
});
|
|
document.querySelectorAll('.yt-toggle').forEach(btn => {
|
|
btn.addEventListener('click', () => {
|
|
const card = btn.closest('.track-card');
|
|
const iframe = card.querySelector('iframe');
|
|
card.classList.toggle('active');
|
|
if (card.classList.contains('active') && iframe) {
|
|
const src = iframe.getAttribute('data-src');
|
|
if (src && iframe.getAttribute('src') !== src)
|
|
iframe.setAttribute('src', src);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|