Files
ipx/site/index.html
rays 50ffc5c81b Home page: no phone row, the player bar unsquashed, Since 2004 full width (#216)
The player crop had class "bar", which is also the header's class, so the
image took the header's padding and flex layout and was drawn squashed.
It is "player" now.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-12 19:59:57 +00:00

121 lines
6.2 KiB
HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>iPX, a podcatcher for the whole household</title>
<meta name="description" content="iPX checks your feeds, downloads new episodes and gives everyone at home their own list, on your own server. The heir to iPodderX, free and open source.">
<meta name="color-scheme" content="light">
<link rel="icon" href="/favicon.png">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="/site.css">
</head>
<body>
<header class="bar">
<a class="home" href="/"><img src="/logo.svg" alt="" width="36" height="36">iPX</a>
<nav aria-label="Elsewhere">
<a href="https://directory.ipxreader.app">Directory</a>
</nav>
</header>
<main>
<section class="hero">
<h1>iPX</h1>
<p class="lede">A podcatcher for the whole household, running on your own server.</p>
<p class="intro">It checks your feeds, downloads new episodes, and gives everyone at home a list of their own to listen from in the browser, all sharing one copy of each file.</p>
<p class="acts">
<a class="btn primary" href="https://directory.ipxreader.app">Browse the directory</a>
</p>
</section>
<!-- The iPodderX logo is a radio's tuning scale and needle. Here the scale is full size and its
stations are shows from the directory; the needle sweeps once and settles. -->
<figure class="dial" aria-label="A radio dial tuned across shows in the iPX directory">
<div class="scale"><div class="track">
<ol class="freq" aria-hidden="true">
<li>88</li><li>92</li><li>96</li><li>100</li><li>104</li><li>108</li>
</ol>
<ul class="stations">
<li>99% Invisible</li>
<li>Hackaday</li>
<li>Clarkesworld</li>
<li>Accidental Tech Podcast</li>
<li>Daring Fireball</li>
<li class="tuned">Ologies</li>
<li>Oxide and Friends</li>
<li>xkcd</li>
<li>The Sporkful</li>
<li>Acquired</li>
<li>Construction Physics</li>
<li>Dwarkesh Podcast</li>
</ul>
<span class="needle" aria-hidden="true"></span>
</div></div>
<figcaption>Some of what people listen to and read on iPX servers today.</figcaption>
</figure>
<!-- Each feature beside the part of the app that shows it, cut from a scratch iPX on public
podcasts, in a navy frame like the dial's. -->
<section class="does" aria-labelledby="does">
<h2 id="does">What it does</h2>
<div class="feature">
<div class="say">
<h3>Everyone gets their own list</h3>
<p>Each person signs in to their own feeds, with their own unread counts, pins and place in every episode. However many of you want an episode, there is one copy on disk.</p>
</div>
<figure class="frame"><img src="/shots/feeds.webp" width="290" height="416" loading="lazy"
alt="The feed list: Directory, Currently Listening and All Subscriptions, then each show with its cover and how many of its episodes are unread."></figure>
</div>
<div class="feature">
<div class="say">
<h3>It does the fetching</h3>
<p>Feeds are checked on a schedule and new episodes download on their own, filtered by keyword, media type or explicit content. Old files are cleared to stay within the disk space you give it, never one somebody pinned.</p>
</div>
<figure class="frame"><img class="cut" src="/shots/episodes.webp" width="904" height="283" loading="lazy"
alt="99% Invisible's episodes in a table with each one's size and date, and the downloaded one's file beside it, ready to play, save, share or delete."></figure>
</div>
<div class="feature wide">
<div class="say">
<h3>Pick up where you left off</h3>
<p>The player keeps your place in every episode, on every device. Turn on DeadAir for a show and it plays without the long silences, leaving the pause you choose.</p>
</div>
<figure class="frame"><img class="cut player" src="/shots/player.webp" width="1200" height="80" loading="lazy"
alt="The player along the bottom of the page: the episode playing, back and forward, how far in it is, its speed and the volume."></figure>
</div>
<div class="feature">
<div class="say">
<h3>A shared directory</h3>
<p>iPX servers can share the public shows their people follow. <a href="https://directory.ipxreader.app">Browse the directory</a> to find something new, and subscribe in one click from your own server.</p>
</div>
<figure class="frame"><img class="cut" src="/shots/directory.webp" width="700" height="186" loading="lazy"
alt="The directory's most subscribed shows, each with its cover and how many people subscribe."></figure>
</div>
<dl class="also">
<div><dt>BitTorrent too</dt>
<dd>A show published as a torrent downloads like any other. iPX joins the swarm, seeds back until the ratio or time you set, and gives up on one that stalls. A slow swarm never holds up the rest.</dd></div>
<div><dt>Subscribe to a whole list</dt>
<dd>Give iPX the address of an OPML list and it keeps a folder in step with it, as whoever keeps the list adds and drops shows. Your own subscriptions import and export as OPML too.</dd></div>
<div><dt>Sign in your way</dt>
<dd>Each person signs in with a password, or Cloudflare Access or Authentik signs them in for you. An admin adds people and decides who else is one.</dd></div>
<div><dt>Blogs too</dt>
<dd>Any RSS or Atom feed works, so the blogs you read sit beside the shows you listen to, each with its own read and unread.</dd></div>
</dl>
</section>
<section class="then" aria-labelledby="then">
<h2 id="then">Since 2004</h2>
<p>iPodderX was one of the first podcatchers, a Mac app by Ray Slakinski and August Trometer, from the year podcasts got their name. iPX is its engine rewritten in Rust for a server, with a page modelled on the original window: the feed list down the side, the episodes in a table, the player along the bottom.</p>
</section>
</main>
<footer>
<p>iPX is free and open source under the MIT licence.</p>
</footer>
</body>
</html>