chrome/app.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<!DOCTYPE html>
<html>
  <head>
    <title>WebTorrent</title>
    <link rel="stylesheet" href="main.css">
    <link rel="stylesheet" href="font-awesome/css/font-awesome.min.css">
  </head>
  <body id="app">
    <header>
      <div class="system">
        <i class="close fa fa-times-circle fa-lg"></i>
        <i class="minimize fa fa-minus-circle fa-lg"></i>
        <i class="maximize fa fa-plus-circle fa-lg"></i>
        <i class="close fa fa-circle fa-lg"></i>
        <i class="minimize fa fa-circle fa-lg"></i>
        <i class="maximize fa fa-circle fa-lg"></i>
      </div>
      <div class="title">WebTorrent</div>
      <div class="buttons">
        <form id="addTorrent">
          <input
            autofocus
            autocomplete="off"
            placeholder="enter magnet uri"
            value="magnet:?xt=urn:btih:d2474e86c95b19b8bcfdb92bc12c9d44667cfa36&amp;dn=Leaves+of+Grass+by+Walt+Whitman.epub"
          >
          <button type="submit">Add</button>
        </form>
      </div>
    </header>
    <div class="overallStats">
      <!-- TODO: heart should be colored red -> green based on ratio -->
      <span class="ratio"><i class="fa fa-heart fa-lg"></i>Ratio: {{ ratio }}</span>
      <span class="upload"><i class="fa fa-arrow-up fa-lg"></i><span>0.0 KB/s</span></span>
      <span class="download"><i class="fa fa-arrow-down fa-lg"></i><span>0.0 KB/s</span></span>
    </div>

    <main id="torrents">

    </main>

    <footer>
      <span class="numTransfers">1 transfer</span>
      <span class="issue"><a href="https://github.com/feross/webtorrent/issues/new" target="_blank"><i class="fa fa-github fa-lg"></i>Report an issue</a></span>
    </footer>

<!--     <h3>Torrent Info</h4>
    <ul>
      <li class="displayName">Display Name: <span></span></li>
      <li class="infoHash">Info Hash: <span></span></li>
      <li class="dhtNodes">DHT Nodes: <span>0</span></li>
      <li class="dhtPeers">DHT Peers: <span>0</span></li>
      <li class="connectedPeers">Connected Peers: <span>0</span></li>
      <li class="downloadMetadata"><a href="#">Download .torrent</a></li>
    </ul> -->

    <script src="bundle.js"></script>
  </body>
</html>