usenet-indexer/public/index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Voyager 2</title>
    <link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%232f6fed'/%3E%3Cpath d='M9 10h14M9 16h14M9 22h9' stroke='white' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E" />
    <link rel="stylesheet" href="/app.css" />
  </head>
  <body>
    <header class="topbar">
      <a class="brand" href="/" aria-label="Voyager 2, home">
        <span class="brand-mark" aria-hidden="true"></span>
        <span>Voyager 2</span>
      </a>
      <dl class="stats" id="stats" aria-label="Index statistics"></dl>
    </header>

    <main class="layout">
      <section class="search" aria-label="Search">
        <div class="search-row">
          <label class="search-box">
            <svg aria-hidden="true" viewBox="0 0 24 24"><circle cx="11" cy="11" r="7" /><path d="m20 20-3.5-3.5" /></svg>
            <input id="q" type="search" autocomplete="off" spellcheck="false"
                   placeholder="Search release names…" aria-label="Search" />
            <kbd aria-hidden="true">/</kbd>
          </label>
          <label class="select">
            <span class="visually-hidden">Sort</span>
            <select id="sort">
              <option value="newest">Newest</option>
              <option value="oldest">Oldest</option>
              <option value="largest">Largest</option>
              <option value="files">Most files</option>
              <option value="name">Name</option>
            </select>
          </label>
        </div>
        <div class="filters" role="group" aria-label="Filters">
          <button class="chip" type="button" data-filter="readable" aria-pressed="false">Readable names</button>
          <button class="chip" type="button" data-filter="complete" aria-pressed="false">Complete</button>
          <label class="select select-small">
            <span class="visually-hidden">Category</span>
            <select id="cat">
              <option value="">Any category</option>
            </select>
          </label>
          <label class="select select-small">
            <span class="visually-hidden">Recognised by</span>
            <select id="source">
              <option value="">Any source</option>
              <option value="stem">Filename</option>
              <option value="subject">Subject</option>
              <option value="post">Post id</option>
            </select>
          </label>
          <span class="field-chip" title="Release size in MB">
            <label for="min_size">Size</label>
            <input type="number" id="min_size" min="0" step="any" inputmode="decimal" placeholder="min" aria-label="Minimum size in MB" />
            <span aria-hidden="true">–</span>
            <input type="number" id="max_size" min="0" step="any" inputmode="decimal" placeholder="max" aria-label="Maximum size in MB" />
            <span class="unit">MB</span>
          </span>
          <span class="chip chip-active" id="poster-filter" hidden>
            <span id="poster-filter-label"></span>
            <button type="button" id="poster-clear" aria-label="Remove poster filter">×</button>
          </span>
        </div>
      </section>

      <section class="results" aria-live="polite">
        <p class="summary" id="summary"></p>
        <ol class="release-list" id="list"></ol>
        <div class="more">
          <button type="button" class="button" id="more" hidden>Load more</button>
        </div>
        <p class="empty" id="empty" hidden>No releases match. Try fewer words or turn off a filter.</p>
      </section>
    </main>

    <div class="scrim" id="scrim" hidden></div>
    <aside class="drawer" id="drawer" aria-labelledby="detail-name" hidden>
      <div class="drawer-head">
        <div class="drawer-title">
          <p class="eyebrow" id="detail-source"></p>
          <h2 id="detail-name"></h2>
        </div>
        <button type="button" class="icon-button" id="close" aria-label="Close details">
          <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M6 6l12 12M18 6 6 18" /></svg>
        </button>
      </div>
      <div class="drawer-body" id="detail"></div>
    </aside>

    <template id="row-template">
      <li class="release">
        <button type="button" class="release-main">
          <span class="release-name"></span>
          <span class="release-meta"></span>
        </button>
        <div class="release-side">
          <span class="badges"></span>
          <span class="release-size"></span>
          <a class="icon-button nzb" title="Download NZB" aria-label="Download NZB">
            <svg aria-hidden="true" viewBox="0 0 24 24"><path d="M12 4v11m0 0 4-4m-4 4-4-4M5 19h14" /></svg>
          </a>
        </div>
      </li>
    </template>

    <script src="/app.js" type="module"></script>
  </body>
</html>