index.html

<!DOCTYPE html>

<html lang="en">
<head>

  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <meta name="description" content="Inspect and edit what's in your Torrent file or Magnet link" />
  <meta name="keywords" content="torrent, webtorrent, magnet, p2p, peer to peer, filesharing, announce, tracker, webseed" />
  <meta name="author" content="Leo Herzog | herzog.tech" />
  <meta name="theme-color" content="#102030" />
  <link href="/manifest.webmanifest" rel="manifest" />
  <link href="/favicon.ico" rel="icon" />
  <link href="/img/TorrentParts-Icon-1x.png" rel="icon" type="image/png" sizes="128x128" />
  <link href="/img/TorrentParts-Icon-2x.png" rel="icon" type="image/png" sizes="256x256" />
  <link href="/img/TorrentParts-Icon-3x.png" rel="icon" type="image/png" sizes="512x512" />
  <link href="/img/TorrentParts-Icon-1x.png" rel="apple-touch-icon" type="image/png" sizes="128x128" />
  <link href="/img/TorrentParts-Icon-2x.png" rel="apple-touch-icon" type="image/png" sizes="256x256" />
  <link href="/img/TorrentParts-Icon-3x.png" rel="apple-touch-icon" type="image/png" sizes="512x512" />
  <meta name="msapplication-TileColor" content="#102030" />
  <meta name="msapplication-TileImage" content="/img/TorrentParts-Icon-2x.png" />
  <meta property="og:image" content="/img/TorrentParts-Social.png" />
  <meta property="og:image:type" content="image/png" />
  <meta property="og:image:width" content="1280" />
  <meta property="og:image:height" content="640" />
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://torrent.parts/" />
  <meta property="og:title" content="Torrent Parts" />
  <meta property="og:description" content="Inspect and edit what's in your Torrent file or Magnet link" />
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:creator" content="@xd1936" />
  <meta name="twitter:title" content="Torrent Parts" />
  <meta name="twitter:description" content="Inspect and edit what's in your Torrent file or Magnet link" />
  <meta name="twitter:image" content="https://torrent.parts/img/TorrentParts-Social.png" />

  <title>Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link</title>

  <link href="https://cdn.jsdelivr.net/npm/tippy.js@6/dist/tippy.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/tippy.js@6/animations/shift-away-subtle.css" rel="stylesheet" />
  <link href="https://cdn.jsdelivr.net/npm/notyf@3/notyf.min.css" rel="stylesheet" />
  <link href="/src/style.css" rel="stylesheet" />
  <script async src="/ext/fa.min.js"></script>
  <script async defer src="https://buttons.github.io/buttons.js"></script>

  <script async defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "6f97f49b4c384ee197a2f319cebec274"}'></script>

</head>

<body>

  <header>
    <h1 id="logo">Torrent<span id="originalSourceIcon"><span class="fad fa-magnet fa-fw" aria-hidden="true"></span></span>Parts</h1>
    <a class="github-button" href="https://github.com/leoherzog/TorrentParts" data-icon="octicon-star" data-show-count="true" aria-label="Star TorrentParts on GitHub">Star</a>
  </header>

  <div id="startButtons">

    <input id="magnet" type="text" placeholder="Enter URL" aria-label="Enter URL and press enter" />
    <label for="magnet" class="sr-only">
      Enter URL and press enter
    </label>

    <input id="torrent" type="file" accept=".torrent" aria-label="Select Torrent file" />
    <label for="torrent">
      <span class="fas fa-cloud-upload" aria-hidden="true"></span> Select Torrent File
    </label>

  </div>

  <div id="examples">
    <div>...or, try some examples!</div>
    <button id="example1" aria-label="Load Magnet Example"><span class="fal fa-magnet" aria-hidden="true"></span> Magnet URL</button>
    <button id="example2" aria-label="Load URL to Torrent File Example"><span class="fal fa-link" aria-hidden="true"></span> URL to Torrent File</button>
    <button id="example3" aria-label="Load Torrent File Example"><span class="fal fa-file-alt" aria-hidden="true"></span> Torrent File</button>
  </div>

  <div id="properties" style="display:none">

    <button id="reset" aria-label="Reset the page">
      <span class="far fa-times"></span>
    </button>
    
    <div id="share">
      <a id="openURLWrapper" target="_blank">
        <button id="openURL" aria-label="Open this Magnet URL in your Torrent client">
          <span class="fas fa-arrow-up-right-from-square fa-2x"></span>
        </button>
      </a>
      <div>
        <button id="copyURL" aria-label="Copy this torrent.parts link to the clipboard">
          <span class="fas fa-link fa-2x"></span>
        </button>
      </div>
      <div>
        <button id="copyMagnet" aria-label="Copy this Magnet URL to the clipboard">
          <span class="fas fa-magnet fa-2x" data-fa-transform="down-1"></span>
        </button>
      </div>
      <div id="downloadTorrentWrapper">
        <button id="downloadTorrent" aria-label="Download this as a Torrent file">
          <span class="fas fa-file-download fa-2x"></span>
        </button>
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="This is the unique identifier that makes Torrents work. All of the files contained in this Torrent are run through an algorithm that generates a unique string, or &ldquo;hash&rdquo;."><span class="far fa-info-circle"></span></span>
          <label for="hash">Unique Hash</label>
        </div>
      </div>
      <div class="content">
        <input id="hash" type="text" placeholder="" disabled/>
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="An optional title specified by the creator"><span class="far fa-info-circle"></span></span>
          <label for="name">Torrent Name</label>
        </div>
      </div>
      <div class="content">
        <input id="name" type="text" placeholder="Unnamed" dir="auto" />
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="Data embedded into a Torrent file that says what program created it and when. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
          <label for="created">Created</label>
        </div>
        <label for="createdBy" style="display:none">Created By</label>
      </div>
      <div class="content">
        <input id="created" type="text" placeholder="Creation time unspecified" aria-label="Creation time" disabled required />
        <br />
        <input id="createdBy" type="text" placeholder="Creation client unspecified" aria-label="Creation client" disabled />
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="An optional description specified by the creator"><span class="far fa-info-circle"></span></span>
          <label for="comment">Comment</label>
        </div>
      </div>
      <div class="content">
        <input id="comment" type="text" placeholder="Not included in the URL/File provided" dir="auto" />
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="Servers that keep track of other users who are actively downloading this Torrent, called &ldquo;peers&rdquo;. Your client will contact these servers first to find out who else is available to download the files from."><span class="far fa-info-circle"></span></span>
          <label for="announce">Tracker URLs</label>
        </div>
        <a id="addTrackers">Add Known Working Trackers</a>
        <a id="removeTrackers">Remove All</a>
      </div>
      <div class="content">
        <button id="addTracker" data-type="announce">
          <span class="far fa-plus-circle"></span> Add Tracker
        </button>
        <div id="announce"></div>
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="A list of webservers on the internet that also have a copy of the file(s) in this Torrent, to use in case no peers are available"><span class="far fa-info-circle"></span></span>
          <label for="urlList">Webseed URLs</label>
        </div>
        <a id="removeWebseeds">Remove All</a>
      </div>
      <div class="content">
        <button id="addWebseed" data-type="urlList">
          <span class="far fa-plus-circle"></span> Add Webseed
        </button>
        <div id="urlList"></div>
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="Torrents take files and split them into equal size pieces to make them easy to share. Piece size is configurable when a Torrent file is made."><span class="far fa-info-circle"></span></span>
          <label for="pieces">Pieces</label>
        </div>
      </div>
      <div class="content">
        <input id="pieces" type="text" placeholder="Not included in the URL/File provided" aria-label="Piece size and length" disabled required />
      </div>
    </div>

    <div class="property">
      <div class="labels">
        <div>
          <span class="info" data-tippy-content="The files listed in this Torrent file. Not included in Magnet links."><span class="far fa-info-circle"></span></span>
          <label for="files">Files</label>
        </div>
        <a id="getFiles">Fetch Files List from WebTorrent</a>
      </div>
      <table id="files">
        <tbody id="filesBody"></tbody>
      </table>
    </div>

  </div>

  <footer>
    <a href="https://github.com/leoherzog/TorrentParts/releases" target="_blank" rel="noopener">v2.0.0</a>
  </footer>

  <script type="module" src="/src/parse.js"></script>

  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', () => navigator.serviceWorker.register('/src/sw.js'));
    }
  </script>

</body>

</html>