bitvid/torrent/beacon.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <base href="./" />
    <meta charset="UTF-8" />
    <title>bitvid βeacon | A Browser Based WebTorrent Client</title>
    <meta
      name="description"
      content="bitvid βeacon uses code from βTorrent. βTorrent is a fully-featured Browser WebTorrent Client"
    />
    <meta
      name="keywords"
      content="bitvid, client, webtorrent, browser, torrent, stream, bittorrent, torrenting, sharing, filesharing"
    />

    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <script src="../js/tracking.js" defer></script>
    <script src="../js/webtorrent.min.js" defer></script>
    <script type="module" src="dist/beacon.js"></script>

    <link rel="stylesheet" href="../css/tailwind.generated.css" />
  </head>

  <body class="bg-surface font-sans text-text" data-ds="new">
    <header class="ds-header border-b border-border-translucent-medium bg-surface">
      <div class="mx-auto flex max-w-5xl items-center px-4 py-6 sm:px-6 lg:px-8">
        <a
          class="focus-ring inline-flex items-center gap-3 rounded-full px-2 py-1.5 text-text transition-colors duration-fast ease-out hover:bg-panel-hover hover:text-text"
          href="../index.html"
          aria-label="Return to the bitvid home page"
        >
          <span
            class="header-torrent__logo-image inline-flex items-center bv-logo"
            data-wordmark="current"
            role="img"
            aria-label="bitvid logo"
          >
            <svg
              class="h-full w-auto"
              viewBox="0 0 318.32 108.98"
              aria-hidden="true"
              focusable="false"
            >
              <g class="bv-logo__accent">
                <rect x="7.1" y="7.8" width="5.84" height="5.48" />
                <rect x="7.1" y="18.78" width="24.02" height="5.48" />
                <rect x="7.1" y="29.77" width="42.85" height="5.48" />
                <rect x="7.1" y="40.76" width="61.68" height="5.48" />
                <rect x="7.1" y="51.75" width="80.88" height="5.48" />
                <rect x="7.1" y="62.74" width="61.68" height="5.48" />
                <rect x="7.1" y="73.73" width="42.85" height="5.48" />
                <rect x="7.1" y="84.72" width="24.02" height="5.48" />
                <rect x="7.1" y="95.71" width="5.84" height="5.48" />
              </g>
              <g class="bv-logo__wordmark">
                <path d="M121.28 25.08v44.54c0 5.67 2.79 8.54 8.22 8.54h11.57c5.51 0 8.3-2.87 8.3-8.54v-13.09c0-5.67-2.79-8.46-8.3-8.46h-16.6v-5.83h17.72c8.7 0 13.01 4.47 13.01 13.33v15.01c0 8.86-4.31 13.33-13.01 13.33h-13.73c-8.7 0-13.01-4.47-13.01-13.33V25.08h5.83Z" />
                <path d="M168.53 25.08v6.26h-5.83v-6.26h5.83Zm0 17.56v41.27h-5.83v-41.27h5.83Z" />
                <path d="M191.36 25.08v17.16h9.02v5.19h-9.02v36.48h-5.83v-36.48h-9.82v-5.19h9.82V25.08h5.83Z" />
                <path d="M212.88 42.24l16.84 35.68 16.6-35.68h6.07l-19.56 41.67h-6.31l-20.04-41.67h6.39Z" />
                <path d="M264.05 25.08v6.26h-5.83v-6.26h5.83Zm0 17.16v41.67h-5.83v-41.67h5.83Z" />
                <path d="M311.21 25.08v45.5c0 8.86-4.31 13.33-13.01 13.33h-13.73c-8.7 0-13.01-4.47-13.01-13.33v-15.01c0-8.86 4.31-13.33 13.01-13.33h17.72v5.83h-16.6c-5.51 0-8.3 2.79-8.3 8.46v13.09c0 5.67 2.79 8.54 8.3 8.54h11.49c5.51 0 8.3-2.87 8.3-8.54V25.08h5.83Z" />
              </g>
            </svg>
          </span>
        </a>
      </div>
    </header>

    <main
      class="mx-auto max-w-5xl px-4 py-6 sm:px-6 lg:px-8 bv-stack"
      data-ds="new"
    >
      <section class="card p-6">
        <form
          class="bv-stack bv-stack--tight md:flex md:flex-row md:items-end md:gap-md"
          data-beacon="magnet-form"
        >
          <div class="bv-stack bv-stack--tight flex-1">
            <label
              class="text-xs font-semibold uppercase tracking-wide text-muted-strong"
              for="torrentInput"
            >
              Magnet, hash, or HTTPS .torrent URL
            </label>
            <input
              id="torrentInput"
              class="input"
              type="text"
              placeholder="magnet:?xt=…"
              data-beacon="magnet-input"
              autocomplete="off"
            />
          </div>

          <div class="flex flex-wrap items-center gap-3 md:justify-end">
            <button type="submit" class="btn inline-flex items-center gap-2">
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path d="M12 3v14"></path>
                <path d="m6 11 6 6 6-6"></path>
                <path d="M19 21H5"></path>
              </svg>
              Download
            </button>

            <input
              type="file"
              multiple
              class="hidden"
              data-beacon="seed-input"
              aria-hidden="true"
            />

            <button
              type="button"
              class="btn-ghost inline-flex items-center gap-2"
              data-beacon="seed-button"
            >
              <svg
                class="h-4 w-4"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
                aria-hidden="true"
              >
                <path d="M12 21V7"></path>
                <path d="m6 13 6-6 6 6"></path>
                <path d="M5 21h14"></path>
              </svg>
              Seed files
            </button>
          </div>
        </form>
      </section>

      <section class="card overflow-hidden" aria-label="Active torrents">
        <div data-beacon="torrent-table"></div>
      </section>

      <section class="card p-6" data-beacon="selected" hidden>
        <div class="grid gap-xl lg:grid-cols-2">
          <div class="bv-stack bv-stack--tight overflow-auto">
            <div class="bv-stack bv-stack--tight">
              <h2 class="text-lg font-semibold text-text" data-beacon="selected-name"></h2>

              <div class="flex flex-wrap gap-2">
                <button
                  type="button"
                  class="btn-ghost inline-flex items-center gap-2"
                  data-beacon-action="pause"
                >
                  <svg
                    class="h-4 w-4"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    aria-hidden="true"
                  >
                    <rect x="6" y="4" width="4" height="16"></rect>
                    <rect x="14" y="4" width="4" height="16"></rect>
                  </svg>
                  Pause
                </button>

                <button
                  type="button"
                  class="btn-ghost inline-flex items-center gap-2"
                  data-beacon-action="resume"
                >
                  <svg
                    class="h-4 w-4"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    aria-hidden="true"
                  >
                    <polygon points="6 4 20 12 6 20 6 4"></polygon>
                  </svg>
                  Resume
                </button>

                <button
                  type="button"
                  class="btn inline-flex items-center gap-2"
                  data-beacon-action="download-all"
                >
                  <svg
                    class="h-4 w-4"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    aria-hidden="true"
                  >
                    <path d="M12 3v14"></path>
                    <path d="m6 11 6 6 6-6"></path>
                  </svg>
                  Download all
                </button>

                <button
                  type="button"
                  class="btn-ghost inline-flex items-center gap-2"
                  data-variant="critical"
                  data-beacon-action="remove"
                >
                  <svg
                    class="h-4 w-4"
                    viewBox="0 0 24 24"
                    fill="none"
                    stroke="currentColor"
                    stroke-width="2"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    aria-hidden="true"
                  >
                    <path d="M18 6L6 18"></path>
                    <path d="M6 6l12 12"></path>
                  </svg>
                  Remove
                </button>
              </div>
            </div>

            <div class="bv-stack bv-stack--tight">
              <h3 class="text-sm font-semibold uppercase tracking-wide text-muted">
                Share
              </h3>
              <ul class="bv-stack bv-stack--tight text-sm text-muted-strong">
                <li>
                  <button
                    type="button"
                    class="btn-ghost inline-flex items-center gap-2 text-xs"
                    data-beacon-action="copy-magnet"
                  >
                    Copy magnet
                  </button>
                </li>
                <li>
                  <strong class="font-semibold text-text">Hash:</strong>
                  <span data-beacon="info-hash"></span>
                </li>
              </ul>
            </div>
          </div>

          <div class="bv-stack bv-stack--tight">
            <h3 class="text-sm font-semibold uppercase tracking-wide text-muted">
              Files
            </h3>
            <div class="overflow-x-auto">
              <table class="min-w-full divide-y divide-border-translucent text-sm">
                <thead class="bg-surface-alt text-muted-strong">
                  <tr>
                    <th class="px-3 py-2 text-left font-medium">Name</th>
                    <th class="px-3 py-2 text-left font-medium">Size</th>
                    <th class="px-3 py-2 text-left font-medium">Priority</th>
                  </tr>
                </thead>
                <tbody
                  class="divide-y divide-border-translucent bg-surface"
                  data-beacon="file-list"
                ></tbody>
              </table>
            </div>
          </div>
        </div>
      </section>

      <div class="text-center text-sm font-semibold text-muted" data-beacon="client-stats">
        Client stats: ↓ 0 B/s · ↑ 0 B/s · Ratio: 0.00
      </div>
    </main>

    <div
      class="ds-overlay-backdrop z-overlay-floating"
      data-beacon="processing-overlay"
      hidden
    >
      <svg
        class="h-12 w-12 animate-spin text-info-strong"
        viewBox="0 0 24 24"
        role="img"
        aria-hidden="true"
      >
        <circle
          class="stroke-border-translucent opacity-40"
          cx="12"
          cy="12"
          r="9"
          fill="none"
          stroke-width="2"
        ></circle>
        <path
          class="stroke-current"
          d="M21 12a9 9 0 0 0-9-9"
          fill="none"
          stroke-width="2"
          stroke-linecap="round"
        ></path>
      </svg>
    </div>
  </body>
</html>