UI Components Easy
Podcast — Subscribe Cta
A dark, audio-first subscribe panel for a fictional podcast that lines up Apple Podcasts, Spotify, YouTube and RSS follow buttons with brand-tinted glyphs, glowing hover states and live subscriber tallies. A dedicated copy-RSS control lifts the feed URL to the clipboard and fires a toast, while a compact stats strip and animated waveform reinforce the show identity across desktop and small screens.
Open in Lab
MCP
html css vanilla-js
Targets: JS HTML
Code
:root {
--bg: #0c0c10;
--surface: #15151c;
--surface-2: #1d1d27;
--violet: #8b5cf6;
--violet-d: #7c3aed;
--cyan: #22d3ee;
--pink: #f472b6;
--ink: #f4f4f8;
--muted: #9a9aab;
--line: rgba(255, 255, 255, 0.1);
--line-2: rgba(255, 255, 255, 0.18);
--white: #fff;
--r-sm: 8px;
--r-md: 14px;
--r-lg: 20px;
--apple: #c471f5;
--spotify: #1ed760;
--youtube: #ff3b3b;
}
* {
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
padding: 40px 18px;
font-family: "Inter", system-ui, -apple-system, sans-serif;
line-height: 1.5;
color: var(--ink);
background:
radial-gradient(60% 55% at 15% 0%, rgba(139, 92, 246, 0.22), transparent 60%),
radial-gradient(55% 50% at 100% 100%, rgba(34, 211, 238, 0.16), transparent 60%),
var(--bg);
}
.stage {
width: 100%;
max-width: 460px;
}
/* ---------- card ---------- */
.card {
position: relative;
background: linear-gradient(180deg, var(--surface-2), var(--surface));
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: 26px 24px 24px;
box-shadow:
0 30px 70px -30px rgba(0, 0, 0, 0.8),
0 0 0 1px rgba(255, 255, 255, 0.02) inset;
}
.card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
border-radius: var(--r-lg) var(--r-lg) 0 0;
background: linear-gradient(90deg, var(--violet), var(--cyan), var(--pink));
opacity: 0.9;
}
/* ---------- header ---------- */
.card__head {
display: flex;
gap: 16px;
align-items: center;
}
.cover {
position: relative;
flex: 0 0 auto;
width: 74px;
height: 74px;
border-radius: var(--r-md);
background:
radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.25), transparent 45%),
linear-gradient(140deg, var(--violet-d), var(--violet) 45%, var(--cyan));
display: grid;
place-items: center;
box-shadow: 0 12px 30px -10px rgba(139, 92, 246, 0.7);
}
.cover__mic {
width: 16px;
height: 26px;
border-radius: 10px;
background: var(--white);
position: relative;
box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
}
.cover__mic::after {
content: "";
position: absolute;
left: 50%;
bottom: -12px;
transform: translateX(-50%);
width: 2px;
height: 10px;
background: var(--white);
box-shadow: -6px -3px 0 -1px transparent;
}
.cover__ring {
position: absolute;
width: 30px;
height: 30px;
border: 2px solid rgba(255, 255, 255, 0.55);
border-top-color: transparent;
border-bottom-color: transparent;
border-radius: 50%;
bottom: 12px;
}
.head__meta {
min-width: 0;
}
.pill {
display: inline-flex;
align-items: center;
gap: 7px;
font-size: 11.5px;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cyan);
background: rgba(34, 211, 238, 0.1);
border: 1px solid rgba(34, 211, 238, 0.25);
padding: 4px 10px;
border-radius: 999px;
}
.pill__dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.6);
animation: pulse 1.8s infinite;
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0.55); }
70% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); }
100% { box-shadow: 0 0 0 0 rgba(34, 211, 238, 0); }
}
.head__title {
margin: 8px 0 2px;
font-size: 24px;
font-weight: 800;
letter-spacing: -0.02em;
}
.head__by {
margin: 0;
font-size: 13px;
color: var(--muted);
}
/* ---------- waveform ---------- */
.wave {
display: flex;
align-items: center;
justify-content: center;
gap: 3px;
height: 46px;
margin: 22px 0 6px;
}
.wave span {
width: 4px;
border-radius: 999px;
background: linear-gradient(180deg, var(--violet), var(--cyan));
animation: bounce 1.4s ease-in-out infinite;
opacity: 0.9;
}
.wave span:nth-child(odd) { animation-duration: 1.1s; }
.wave span:nth-child(3n) { animation-duration: 1.7s; background: linear-gradient(180deg, var(--pink), var(--violet)); }
.wave span:nth-child(1) { height: 30%; animation-delay: -.2s; }
.wave span:nth-child(2) { height: 62%; animation-delay: -.5s; }
.wave span:nth-child(3) { height: 40%; animation-delay: -.1s; }
.wave span:nth-child(4) { height: 78%; animation-delay: -.7s; }
.wave span:nth-child(5) { height: 52%; animation-delay: -.3s; }
.wave span:nth-child(6) { height: 90%; animation-delay: -.9s; }
.wave span:nth-child(7) { height: 44%; animation-delay: -.4s; }
.wave span:nth-child(8) { height: 66%; animation-delay: -.6s; }
.wave span:nth-child(9) { height: 34%; animation-delay: -.2s; }
.wave span:nth-child(10) { height: 84%; animation-delay: -.8s; }
.wave span:nth-child(11) { height: 48%; animation-delay: -.35s; }
.wave span:nth-child(12) { height: 72%; animation-delay: -.55s; }
.wave span:nth-child(13) { height: 38%; animation-delay: -.15s; }
.wave span:nth-child(14) { height: 94%; animation-delay: -.95s; }
.wave span:nth-child(15) { height: 56%; animation-delay: -.45s; }
.wave span:nth-child(16) { height: 42%; animation-delay: -.25s; }
.wave span:nth-child(17) { height: 68%; animation-delay: -.65s; }
.wave span:nth-child(18) { height: 32%; animation-delay: -.1s; }
.wave span:nth-child(19) { height: 80%; animation-delay: -.75s; }
.wave span:nth-child(20) { height: 50%; animation-delay: -.4s; }
.wave span:nth-child(21) { height: 60%; animation-delay: -.5s; }
.wave span:nth-child(22) { height: 36%; animation-delay: -.2s; }
.wave span:nth-child(23) { height: 74%; animation-delay: -.7s; }
.wave span:nth-child(24) { height: 46%; animation-delay: -.3s; }
.wave span:nth-child(25) { height: 64%; animation-delay: -.6s; }
@keyframes bounce {
0%, 100% { transform: scaleY(0.5); }
50% { transform: scaleY(1); }
}
/* ---------- section label ---------- */
.section-label {
margin: 16px 0 12px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
/* ---------- platforms ---------- */
.platforms {
display: grid;
gap: 10px;
}
.plat {
--accent: var(--violet);
display: flex;
align-items: center;
gap: 14px;
width: 100%;
text-align: left;
padding: 13px 15px;
border-radius: var(--r-md);
border: 1px solid var(--line);
background: var(--surface);
color: var(--ink);
font-family: inherit;
cursor: pointer;
transition: transform 0.15s ease, border-color 0.2s ease, box-shadow 0.25s ease, background 0.2s ease;
}
.plat:hover {
transform: translateY(-2px);
border-color: var(--accent);
background: var(--surface-2);
box-shadow: 0 12px 28px -14px var(--accent), 0 0 0 1px var(--accent) inset;
}
.plat:active {
transform: translateY(0) scale(0.99);
}
.plat:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}
.plat.is-following {
border-color: var(--accent);
background: color-mix(in srgb, var(--accent) 12%, var(--surface));
}
.plat__icon {
flex: 0 0 auto;
width: 40px;
height: 40px;
border-radius: 11px;
display: grid;
place-items: center;
color: var(--accent);
background: color-mix(in srgb, var(--accent) 16%, transparent);
transition: box-shadow 0.25s ease;
}
.plat:hover .plat__icon {
box-shadow: 0 0 18px -2px var(--accent);
}
.plat__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
}
.plat__name {
font-size: 14.5px;
font-weight: 700;
letter-spacing: -0.01em;
}
.plat__sub {
font-size: 12px;
color: var(--muted);
}
.plat__count {
flex: 0 0 auto;
font-size: 12px;
font-weight: 600;
color: var(--muted);
padding: 4px 9px;
border-radius: 999px;
border: 1px solid var(--line);
background: rgba(255, 255, 255, 0.03);
transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.plat.is-following .plat__count {
color: var(--accent);
border-color: var(--accent);
}
.plat__count.bump {
transform: scale(1.14);
}
.plat--apple { --accent: var(--apple); }
.plat--spotify { --accent: var(--spotify); }
.plat--youtube { --accent: var(--youtube); }
.plat--rss { --accent: #f59e0b; }
/* ---------- rss row ---------- */
.rss-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 16px;
padding: 12px 12px 12px 15px;
border-radius: var(--r-md);
border: 1px dashed var(--line-2);
background: rgba(255, 255, 255, 0.02);
}
.rss-row__field {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.rss-row__label {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.rss-row__url {
font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
font-size: 12.5px;
color: var(--cyan);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.copy-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 13px;
border-radius: var(--r-sm);
border: 1px solid var(--line-2);
background: linear-gradient(180deg, var(--violet), var(--violet-d));
color: var(--white);
font-family: inherit;
font-size: 13px;
font-weight: 600;
cursor: pointer;
transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.copy-btn:hover {
transform: translateY(-1px);
box-shadow: 0 10px 24px -10px var(--violet);
filter: brightness(1.06);
}
.copy-btn:active {
transform: translateY(0) scale(0.97);
}
.copy-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.5);
}
.copy-btn.is-copied {
background: linear-gradient(180deg, #22c55e, #16a34a);
}
/* ---------- stats ---------- */
.stats {
list-style: none;
margin: 18px 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.stat {
text-align: center;
padding: 12px 6px;
border-radius: var(--r-md);
background: var(--surface);
border: 1px solid var(--line);
}
.stat__num {
display: block;
font-size: 17px;
font-weight: 800;
letter-spacing: -0.02em;
background: linear-gradient(90deg, var(--violet), var(--cyan));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.stat__key {
display: block;
margin-top: 2px;
font-size: 11px;
color: var(--muted);
}
/* ---------- toast ---------- */
.toast {
position: fixed;
left: 50%;
bottom: 26px;
transform: translate(-50%, 24px);
display: flex;
align-items: center;
gap: 9px;
padding: 11px 17px;
border-radius: 999px;
background: var(--surface-2);
border: 1px solid var(--line-2);
color: var(--ink);
font-size: 13.5px;
font-weight: 500;
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.9);
opacity: 0;
pointer-events: none;
transition: opacity 0.28s ease, transform 0.28s ease;
z-index: 40;
}
.toast::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--cyan);
box-shadow: 0 0 10px var(--cyan);
}
.toast.show {
opacity: 1;
transform: translate(-50%, 0);
pointer-events: auto;
}
/* ---------- responsive ---------- */
@media (max-width: 520px) {
body {
padding: 24px 12px;
}
.card {
padding: 22px 16px 20px;
}
.card__head {
gap: 13px;
}
.cover {
width: 62px;
height: 62px;
}
.head__title {
font-size: 21px;
}
.plat {
padding: 12px 12px;
gap: 11px;
}
.plat__sub {
display: none;
}
.rss-row {
flex-wrap: wrap;
}
.copy-btn {
flex: 1 1 100%;
justify-content: center;
}
.stats {
gap: 7px;
}
.stat__num {
font-size: 15px;
}
}
@media (prefers-reduced-motion: reduce) {
.wave span,
.pill__dot {
animation: none;
}
}(function () {
"use strict";
var toastEl = document.getElementById("toast");
var toastTimer = null;
function toast(msg) {
if (!toastEl) return;
toastEl.textContent = msg;
toastEl.classList.add("show");
window.clearTimeout(toastTimer);
toastTimer = window.setTimeout(function () {
toastEl.classList.remove("show");
}, 2400);
}
function formatCount(n) {
if (n >= 1000) {
var k = n / 1000;
return (k >= 100 ? Math.round(k) : k.toFixed(1).replace(/\.0$/, "")) + "K";
}
return String(n);
}
// ---- platform subscribe buttons ----
var buttons = document.querySelectorAll(".plat");
Array.prototype.forEach.call(buttons, function (btn) {
btn.addEventListener("click", function () {
var name = btn.getAttribute("data-platform");
var countEl = btn.querySelector(".plat__count");
var following = btn.classList.toggle("is-following");
var base = parseInt(countEl.getAttribute("data-count"), 10) || 0;
var current = following ? base + 1 : base;
countEl.setAttribute("data-count", current);
countEl.textContent = formatCount(current);
countEl.classList.add("bump");
window.setTimeout(function () {
countEl.classList.remove("bump");
}, 220);
btn.setAttribute("aria-pressed", String(following));
if (following) {
toast("Subscribed on " + name + " — opening app…");
// In production this would follow through to data-url.
} else {
toast("Unsubscribed from " + name);
}
});
btn.setAttribute("aria-pressed", "false");
});
// ---- copy RSS ----
var copyBtn = document.getElementById("copy-rss");
var feedEl = document.getElementById("feed-url");
function fallbackCopy(text) {
var ta = document.createElement("textarea");
ta.value = text;
ta.setAttribute("readonly", "");
ta.style.position = "absolute";
ta.style.left = "-9999px";
document.body.appendChild(ta);
ta.select();
var ok = false;
try {
ok = document.execCommand("copy");
} catch (e) {
ok = false;
}
document.body.removeChild(ta);
return ok;
}
function markCopied() {
var label = copyBtn.querySelector(".copy-btn__label");
var prev = label ? label.textContent : "";
copyBtn.classList.add("is-copied");
if (label) label.textContent = "Copied";
toast("RSS feed URL copied to clipboard");
window.setTimeout(function () {
copyBtn.classList.remove("is-copied");
if (label) label.textContent = prev || "Copy";
}, 1800);
}
if (copyBtn && feedEl) {
copyBtn.addEventListener("click", function () {
var url = feedEl.textContent.trim();
if (navigator.clipboard && navigator.clipboard.writeText) {
navigator.clipboard.writeText(url).then(markCopied, function () {
if (fallbackCopy(url)) markCopied();
else toast("Couldn't copy — select the URL manually");
});
} else if (fallbackCopy(url)) {
markCopied();
} else {
toast("Couldn't copy — select the URL manually");
}
});
}
})();<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Subscribe — Signal & Static Podcast</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=Inter:wght@400;500;600;700;800&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<main class="stage">
<section class="card" aria-labelledby="show-title">
<header class="card__head">
<div class="cover" aria-hidden="true">
<span class="cover__mic"></span>
<span class="cover__ring"></span>
</div>
<div class="head__meta">
<span class="pill">
<span class="pill__dot"></span>
New episode Thursdays
</span>
<h1 id="show-title" class="head__title">Signal & Static</h1>
<p class="head__by">Field notes on sound, code & the people between them — hosted by Mara Quintero.</p>
</div>
</header>
<div class="wave" aria-hidden="true">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span><span></span>
</div>
<h2 class="section-label">Subscribe where you listen</h2>
<div class="platforms" role="group" aria-label="Subscribe on a platform">
<button class="plat plat--apple" type="button" data-platform="Apple Podcasts" data-url="https://podcasts.apple.com/podcast/signal-and-static">
<span class="plat__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path fill="currentColor" d="M12 2a10 10 0 0 0-5.6 18.28 1 1 0 0 0 1.4-1.36A8 8 0 1 1 20 12a7.9 7.9 0 0 1-2.8 6.1 1 1 0 1 0 1.3 1.5A10 10 0 0 0 12 2Zm0 5a5 5 0 0 0-2.9 9.06 1 1 0 0 0 1.4-1.42A3 3 0 1 1 15 12a3 3 0 0 1-1.5 2.6 1 1 0 1 0 1 1.74A5 5 0 0 0 12 7Zm0 3.2A1.8 1.8 0 1 0 13.8 12 1.8 1.8 0 0 0 12 10.2Zm-1.7 4.9-1 5.1a1.8 1.8 0 0 0 1.77 2.15h1.86A1.8 1.8 0 0 0 14.7 20l-1-5a2.6 2.6 0 0 1-3.4 0Z"/></svg>
</span>
<span class="plat__text">
<span class="plat__name">Apple Podcasts</span>
<span class="plat__sub">Follow & auto-download</span>
</span>
<span class="plat__count" data-count="48210">48.2K</span>
</button>
<button class="plat plat--spotify" type="button" data-platform="Spotify" data-url="https://open.spotify.com/show/signal-and-static">
<span class="plat__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path fill="currentColor" d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2Zm4.3 14.4a.9.9 0 0 1-1.24.3 9.7 9.7 0 0 0-8.06-.86.9.9 0 1 1-.5-1.73 11.5 11.5 0 0 1 9.5 1.05.9.9 0 0 1 .3 1.24Zm1.3-2.9a1.1 1.1 0 0 1-1.5.36 12.6 12.6 0 0 0-9.7-1.1 1.1 1.1 0 1 1-.63-2.11 14.8 14.8 0 0 1 11.47 1.35 1.1 1.1 0 0 1 .36 1.5Zm.12-3a15.9 15.9 0 0 0-11.4-1.28 1.32 1.32 0 1 1-.72-2.54 18.5 18.5 0 0 1 13.26 1.5 1.32 1.32 0 0 1-1.14 2.32Z"/></svg>
</span>
<span class="plat__text">
<span class="plat__name">Spotify</span>
<span class="plat__sub">Follow the show</span>
</span>
<span class="plat__count" data-count="71940">71.9K</span>
</button>
<button class="plat plat--youtube" type="button" data-platform="YouTube" data-url="https://youtube.com/@signalandstatic">
<span class="plat__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path fill="currentColor" d="M21.6 7.2a2.75 2.75 0 0 0-1.93-1.95C17.94 4.8 12 4.8 12 4.8s-5.94 0-7.67.45A2.75 2.75 0 0 0 2.4 7.2 28.7 28.7 0 0 0 1.95 12a28.7 28.7 0 0 0 .45 4.8 2.75 2.75 0 0 0 1.93 1.95C6.06 19.2 12 19.2 12 19.2s5.94 0 7.67-.45a2.75 2.75 0 0 0 1.93-1.95A28.7 28.7 0 0 0 22.05 12a28.7 28.7 0 0 0-.45-4.8ZM10 15.2V8.8l5.2 3.2Z"/></svg>
</span>
<span class="plat__text">
<span class="plat__name">YouTube</span>
<span class="plat__sub">Watch video episodes</span>
</span>
<span class="plat__count" data-count="33500">33.5K</span>
</button>
<button class="plat plat--rss" type="button" data-platform="RSS" data-url="https://feeds.signalandstatic.fm/rss.xml">
<span class="plat__icon" aria-hidden="true">
<svg viewBox="0 0 24 24" width="22" height="22"><path fill="currentColor" d="M5 3a1 1 0 0 0 0 2 14 14 0 0 1 14 14 1 1 0 0 0 2 0A16 16 0 0 0 5 3Zm0 6a1 1 0 0 0 0 2 8 8 0 0 1 8 8 1 1 0 0 0 2 0 10 10 0 0 0-10-10Zm.5 6.5A2.5 2.5 0 1 0 8 18a2.5 2.5 0 0 0-2.5-2.5Z"/></svg>
</span>
<span class="plat__text">
<span class="plat__name">Any RSS reader</span>
<span class="plat__sub">Follow the raw feed</span>
</span>
<span class="plat__count" data-count="9120">9.1K</span>
</button>
</div>
<div class="rss-row">
<div class="rss-row__field">
<span class="rss-row__label">Feed URL</span>
<code class="rss-row__url" id="feed-url">https://feeds.signalandstatic.fm/rss.xml</code>
</div>
<button class="copy-btn" type="button" id="copy-rss" aria-label="Copy RSS feed URL to clipboard">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path fill="currentColor" d="M9 3a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7.83a2 2 0 0 0-.59-1.42l-2.82-2.82A2 2 0 0 0 14.17 3Zm0 2h5v3a1 1 0 0 0 1 1h3v6H9Zm-4 4a1 1 0 0 0-1 1v9a2 2 0 0 0 2 2h8a1 1 0 0 0 0-2H6v-9a1 1 0 0 0-1-1Z"/></svg>
<span class="copy-btn__label">Copy</span>
</button>
</div>
<ul class="stats" aria-label="Show statistics">
<li class="stat"><span class="stat__num">142</span><span class="stat__key">Episodes</span></li>
<li class="stat"><span class="stat__num">47 min</span><span class="stat__key">Avg length</span></li>
<li class="stat"><span class="stat__num">3.4M</span><span class="stat__key">Total listens</span></li>
</ul>
</section>
</main>
<div class="toast" id="toast" role="status" aria-live="polite"></div>
<script src="script.js"></script>
</body>
</html>A ready-to-drop subscribe call-to-action for podcast landing pages and show notes. The panel leads with the show artwork, title and a gradient waveform, then presents a stacked grid of platform buttons — Apple Podcasts, Spotify, YouTube and a generic RSS reader — each with a brand-flavored icon, a short helper label and a subscriber count that ticks up when clicked. Buttons carry distinct hover glows and pressed states so the destination always feels tangible.
The RSS row doubles as a utility: a primary “Follow on RSS” action plus a secondary copy button that writes the feed URL to the clipboard and surfaces a toast confirmation. A small stats strip below the buttons shows episode count, average length and total listens to build trust at a glance.
Everything is vanilla HTML, CSS and JavaScript with no dependencies. Controls are real buttons with focus rings and aria labels, the layout collapses to a single column under 520px, and the toast helper, count animation and copy-to-clipboard logic are all self-contained and easy to rewire to your own platform links.