ipx/site/index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>iPX</title>
<meta name="description" content="iPX checks your podcasts, downloads new episodes and gives everyone at home an account of their own, on your own server. The successor 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="/docs/">Docs</a>
    <a href="https://directory.ipxreader.app">Directory</a>
    <a class="src" href="https://git.sdf1.net/rays/ipx" title="Source code on git.sdf1.net"><img src="/gitea.svg" alt="Source code" width="28" height="28"></a>
  </nav>
</header>

<main>
  <section class="hero">
    <h1>iPX</h1>
    <p class="intro">iPX checks your podcasts, downloads new episodes, and gives everyone at home their own account to listen from in the browser. It runs on your own server.</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>
  </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>An account for everyone at home</h3>
        <p>Each person has their own shows, sees what they have and have not heard, and picks up where they left off.</p>
      </div>
      <figure class="frame"><img src="/shots/feeds.webp" width="290" height="276" 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>New episodes, ready to play</h3>
        <p>iPX checks your podcasts through the day and downloads new episodes as they come out. Skip the ones you don't want by keyword, or leave out explicit ones. Old episodes are cleared to stay within the space you give it, but never one someone has 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">
      <div class="say">
        <h3>Pick up where you left off</h3>
        <p>The player keeps your place in every episode, on every device.</p>
      </div>
      <figure class="frame"><img class="cut player" src="/shots/player.webp" width="950" height="80" loading="lazy"
        alt="The player along the bottom of the page: the episode playing, back and forward, and how far in it is."></figure>
    </div>

    <!-- DeadAir: talk keeps its length, the quiet between it shrinks to a short pause, and the
         episode ends sooner. CSS only; the page runs no script of its own. -->
    <div class="feature">
      <div class="say">
        <h3>Cut the dead air</h3>
        <p>Turn on DeadAir for a show and its long silences shrink to a short pause, so episodes finish sooner without anyone talking faster. You choose how long a pause to leave.</p>
      </div>
      <figure class="frame deadair" role="img" aria-label="A waveform whose silent gaps shrink to short pauses, so the episode ends sooner.">
        <div class="wave" aria-hidden="true">
          <span class="talk t1"></span><span class="hush"></span>
          <span class="talk t2"></span><span class="hush"></span>
          <span class="talk t3"></span><span class="hush"></span>
          <span class="talk t4"></span><span class="hush"></span>
          <span class="talk t5"></span><span class="hush"></span>
          <span class="talk t6"></span>
        </div>
      </figure>
    </div>

    <div class="feature">
      <div class="say">
        <h3>See what others listen to</h3>
        <p>iPX servers can share which podcasts their listeners follow, and the directory gathers them in one place. <a href="https://directory.ipxreader.app">Browse the directory</a> to find something new and subscribe in one click.</p>
      </div>
      <figure class="frame"><img class="cut half" src="/shots/directory.webp" width="700" height="133" 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>Some shows publish their episodes as torrents. iPX downloads them like any other, shares them back for as long as you choose, and a slow one never holds up the rest.</dd></div>
      <div><dt>Subscribe to a whole list</dt>
        <dd>Some people publish lists of podcasts they recommend, as OPML. Give iPX a list's address and it keeps a folder of those shows up to date as the list changes. Your own subscriptions move in and out the same way.</dd></div>
      <div><dt>Sign in your way</dt>
        <dd>Everyone signs in with a password, or with the single sign-on you already use, Cloudflare Access or Authentik. 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, and iPX keeps track of what you have read.</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 that app rebuilt to run on your own server.</p>
  </section>
</main>

<footer>
  <p>iPX is free and open source under the MIT licence.</p>
</footer>
</body>
</html>