Web Torrent

index.html

<section class="section">
  <div class="container ">
    <nav class="navbar columns">
      <p class="column has-text-centered">
        <a class="link is-info" href="#">Home</a>
      </p>
      <p class="column has-text-centered">
        <a class="link is-info" href="#">Menu</a>
      </p>
      <p class="column has-text-centered">
        <img class="shadowed" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/170881/Logo.png" style="max-height:90px; margin: -10px 0;     border-radius: 6px;">
      </p>
      <p class="column has-text-centered">
        <a class="link is-info" href="#">Reservations</a>
      </p>
      <p class="column has-text-centered">
        <a class="link is-info" href="#">Contact</a>
      </p>
    </nav>
</section>
</div>
<section class="section">
  <div class="container">
    <h1 class="title">WebTorrent</h1>
    <h2 class="subtitle">BitTorrent over WebRTC</h2>
    <hr>
    <div class="content">
 	<main>
		<p class="subtitle">Streaming file transfer over <a href="http://webtorrent.io" target="_blank">WebTorrent</a> (torrents on the web)</p>
		<h1 id="logHeading" style="display: none">Log</h1>
		<div class="speed"></div>
		<div class="log"></div>
		<section>
			<h1>Start sharing</h1>
			<p>Drag-and-drop files to begin seeding. Or choose a file: <input multiple name="upload" type="file"></p>
		</section>
		<section>
			<h1>Start downloading</h1>
			<form>
				<label for="torrentId">Download from a magnet link or info hash</label><input name="torrentId" placeholder="magnet:" required=""><button type="submit">Download</button>
			</form>
		</section>
		<footer>
			<p><small>Powered by <a href="http://webtorrent.io" target="_blank">WebTorrent</a>. 100% open source &amp; free software. Works in Chrome, Firefox, and Opera. Source code available on <a href="https://github.com/webtorrent/instant.io" target="_blank">GitHub</a>. © 2020 WebTorrent, LLC.</small></p>
		</footer>
	</main>
      
    </div>
    <h3>Log</h3>
    <div class="log"></div>

    <ol>
      <li>Add a <code>columns</code> container</li>
      <li>Add as many <code>column</code> elements as you want</li>
    </ol>
  </div>
  <div class="columns">
    <div class="column">
      <p class="notification is-info">
        First column
      </p>

    </div>
    <div class="column">
      <p class="notification is-success">Second column</p>
    </div>
    <div class="column">
      <p class="notification is-warning">Third column</p>
    </div>
    <div class="column">
      <p class="notification is-danger">Fourth column</p>
    </div>
  </div>

  <figure class="highlight">
    <pre><code class="language-html" data-lang="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"columns"</span><span class="nt">&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">&gt;</span>
    First column
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">&gt;</span>
    Second column
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">&gt;</span>
    Third column
  <span class="nt">&lt;/div&gt;</span>
  <span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">"column"</span><span class="nt">&gt;</span>
    Fourth column
  <span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;/div&gt;</span></code></pre>
  </figure>

  <hr>

  <h3 class="title">Sizes</h3>

  <div class="content">
    <p>If you want to change the <strong>size</strong> of a single column, you can use one the following classes:</p>
    <ul>
      <li>
        <code>is-half</code>
      </li>
      <li>
        <code>is-third</code>
      </li>
      <li>
        <code>is-quarter</code>
      </li>
    </ul>
    <p>The <em>other</em> columns will fill up the <strong>remaining</strong> space automatically.</p>
  </div>

  <div class="columns">
    <div class="column is-half">
      <p class="notification is-info">
        <code class="html">is-half</code>
      </p>
    </div>
    <div class="column">
      <p class="notification is-warning">Auto</p>
    </div>
    <div class="column">
      <p class="notification is-danger">Auto</p>
    </div>
  </div>

  <div class="columns">
    <div class="column is-third">
      <p class="notification is-info">
        <code class="html">is-third</code>
      </p>
    </div>
    <div class="column">
      <p class="notification is-success">Auto</p>
    </div>
    <div class="column">
      <p class="notification is-warning">Auto</p>
    </div>
  </div>

  <div class="columns">
    <div class="column is-quarter">
      <p class="notification is-info">
        <code class="html">is-quarter</code>
      </p>
    </div>
    <div class="column">
      <p class="notification is-success">Auto</p>
    </div>
  </div>

  <h3 class="title">12 columns</h3>

  <div class="columns">
    <div class="column is-2">
      <p class="notification is-info"><code>is-2</code></p>
    </div>
    <div class="column">
      <p class="notification is-warning is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-success is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-warning is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-success is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-warning is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-success is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-warning is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-success is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-warning is-centered">1</p>
    </div>
    <div class="column">
      <p class="notification is-success is-centered">1</p>
    </div>
  </div>

  <hr>

  <h3 class="title"> Hidden Example </h3>
  <div class="columns">
    <div class="column">
      <p class="notification is-info">First column</p>
    </div>
    <div class="column hidden">
      <p class="notification is-success">Second column</p>
    </div>
    <div class="column">
      <p class="notification is-warning">Third column</p>
    </div>
  </div>
  </div>

scripts

<script src="https://gist.githack.com/opencoca/0758d821faeb0315f5aad586a1f0c6cf/raw/188c451f92770aba9b130d5a95b3e12812d958ef/webT.js"></script>

style.css

video{
  width: 99%;
  -webkit-mask-image: -webkit-radial-gradient(circle, white 100%, black 100%); 
-webkit-transform: rotate(0.000001deg); 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px;
border-radius: 10px; 
overflow: hidden; 
}

footer {
	margin: 30px 0;
	font-size: .8em;
	color: #7d868c
}
video, img, audio, iframe, object {
	display: block
}
video, img, audio {
	max-width: 100%;
	margin: 10px 0
}
video {
	min-width: 480px;
	min-height: 270px
}
audio {
	width: 100%;
	height: 50px
}
iframe, object {
	width: 1000px;
	max-width: 100%;
	height: 600px
}

styles

<link href="https://codepen.io/openco/pen/BjqVEo" rel="stylesheet" />

web-torrent.markdown

Web Torrent

A Pen by Alexander Somma on CodePen.

License.