Beginning Stages of Design Implementation

bundle.js

@@ -33317,11 +33317,11 @@ function display() {
 
   resetProperties();
 
+  hash.value = parsed.infoHash;
   name.value = parsed.name || "";
   if (parsed.created) created.value = parsed.created.toISOString().slice(0, 19);
   createdBy.value = parsed.createdBy || "";
   comment.value = parsed.comment || "";
-  hash.value = parsed.infoHash;
 
   announce.innerHTML = "";
   if (parsed.announce && parsed.announce.length) {
@@ -33391,7 +33391,7 @@ function display() {
   copyURL.setAttribute('data-clipboard-text', window.location.origin + "#" + parser.toMagnetURI(parsed));
   copyMagnet.setAttribute('data-clipboard-text', parser.toMagnetURI(parsed));
 
-  properties.style.display = 'block';
+  properties.style.display = 'flex';
 
   window.location.hash = parser.toMagnetURI(parsed);
 
@@ -33420,24 +33420,36 @@ function createFileRow(icon, name, size) {
 function getFontAwesomeIconForMimetype(mimetype) {
   if (!mimetype) return 'file';
   switch (true) {
+    case mimetype.includes("msword"):
+    case mimetype.includes("wordprocessingml"):
+    case mimetype.includes("opendocument.text"):
+    case mimetype.includes("abiword"):
+      return 'file-word';
+    case mimetype.includes("ms-excel"):
+    case mimetype.includes("spreadsheet"):
+      return 'file-powerpoint';
+    case mimetype.includes("powerpoint"):
+    case mimetype.includes("presentation"):
+        return 'file-powerpoint';
     case mimetype.includes("7z-"):
     case mimetype.includes("iso9660"):
     case mimetype.includes("zip"):
+    case mimetype.includes("octet-stream"):
       return 'file-archive';
-    case mimetype.includes("audio"):
-      return 'file-audio';
     case mimetype.includes("csv"):
       return 'file-csv';
-    case mimetype.includes("font"):
-      return 'file-contract';
-    case mimetype.includes("image"):
-      return 'file-image';
     case mimetype.includes("pdf"):
       return 'file-pdf';
+    case mimetype.includes("font"):
+      return 'file-contract';
     case mimetype.includes("text"):
     case mimetype.includes("subrip"):
     case mimetype.includes("vtt"):
       return 'file-alt';
+    case mimetype.includes("audio"):
+      return 'file-audio';
+    case mimetype.includes("image"):
+      return 'file-image';
     case mimetype.includes("video"):
       return 'file-video';
     default:

bundle.min.js

@@ -60,4 +60,4 @@ const i=e("debug")("torrent-discovery"),s=e("bittorrent-dht/client"),r=e("events
 /*! ut_metadata. MIT License. WebTorrent LLC <https://webtorrent.io/opensource> */
 const{EventEmitter:i}=e("events"),s=e("bencode"),r=e("bitfield"),a=e("debug")("ut_metadata"),o=e("simple-sha1"),c=16384;t.exports=e=>{class t extends i{constructor(t){super(),this._wire=t,this._fetching=!1,this._metadataComplete=!1,this._metadataSize=null,this._remainingRejects=null,this._bitfield=new r(0,{grow:1e3}),n.isBuffer(e)&&this.setMetadata(e)}onHandshake(e,t,n){this._infoHash=e}onExtendedHandshake(e){return e.m&&e.m.ut_metadata?e.metadata_size?"number"!=typeof e.metadata_size||1e7<e.metadata_size||e.metadata_size<=0?this.emit("warning",new Error("Peer gave invalid metadata size")):(this._metadataSize=e.metadata_size,this._numPieces=Math.ceil(this._metadataSize/c),this._remainingRejects=2*this._numPieces,void this._requestPieces()):this.emit("warning",new Error("Peer does not have metadata")):this.emit("warning",new Error("Peer does not support ut_metadata"))}onMessage(e){let t,n;try{const i=e.toString(),r=i.indexOf("ee")+2;t=s.decode(i.substring(0,r)),n=e.slice(r)}catch(e){return}switch(t.msg_type){case 0:this._onRequest(t.piece);break;case 1:this._onData(t.piece,n,t.total_size);break;case 2:this._onReject(t.piece)}}fetch(){this._metadataComplete||(this._fetching=!0,this._metadataSize&&this._requestPieces())}cancel(){this._fetching=!1}setMetadata(e){if(this._metadataComplete)return!0;a("set metadata");try{const t=s.decode(e).info;t&&(e=s.encode(t))}catch(e){}return(!this._infoHash||this._infoHash===o.sync(e))&&(this.cancel(),this.metadata=e,this._metadataComplete=!0,this._metadataSize=this.metadata.length,this._wire.extendedHandshake.metadata_size=this._metadataSize,this.emit("metadata",s.encode({info:s.decode(this.metadata)})),!0)}_send(e,t){let i=s.encode(e);n.isBuffer(t)&&(i=n.concat([i,t])),this._wire.extended("ut_metadata",i)}_request(e){this._send({msg_type:0,piece:e})}_data(e,t,n){const i={msg_type:1,piece:e};"number"==typeof n&&(i.total_size=n),this._send(i,t)}_reject(e){this._send({msg_type:2,piece:e})}_onRequest(e){if(!this._metadataComplete)return void this._reject(e);const t=e*c;let n=t+c;n>this._metadataSize&&(n=this._metadataSize);const i=this.metadata.slice(t,n);this._data(e,i,this._metadataSize)}_onData(e,t,n){t.length>c||!this._fetching||(t.copy(this.metadata,e*c),this._bitfield.set(e),this._checkDone())}_onReject(e){this._remainingRejects>0&&this._fetching?(this._request(e),this._remainingRejects-=1):this.emit("warning",new Error('Peer sent "reject" too much'))}_requestPieces(){if(this._fetching){this.metadata=n.alloc(this._metadataSize);for(let e=0;e<this._numPieces;e++)this._request(e)}}_checkDone(){let e=!0;for(let t=0;t<this._numPieces;t++)if(!this._bitfield.get(t)){e=!1;break}if(!e)return;this.setMetadata(this.metadata)||this._failedMetadata()}_failedMetadata(){this._bitfield=new r(0,{grow:1e3}),this._remainingRejects-=this._numPieces,this._remainingRejects>0?this._requestPieces():this.emit("warning",new Error("Peer sent invalid metadata"))}}return t.prototype.name="ut_metadata",t}}).call(this,e("buffer").Buffer)},{bencode:6,bitfield:8,buffer:51,debug:87,events:90,"simple-sha1":230}],283:[function(e,t,n){(function(e){function n(t){try{if(!e.localStorage)return!1}catch(e){return!1}var n=e.localStorage[t];return null!=n&&"true"===String(n).toLowerCase()}t.exports=function(e,t){if(n("noDeprecation"))return e;var i=!1;return function(){if(!i){if(n("throwDeprecation"))throw new Error(t);n("traceDeprecation")?console.trace(t):console.warn(t),i=!0}return e.apply(this,arguments)}}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],284:[function(e,t,n){(function(n){const i=e("binary-search"),s=e("events"),r=e("mp4-stream"),a=e("mp4-box-encoding"),o=e("range-slice-stream");class c{constructor(e,t){this._entries=e,this._countName=t||"count",this._index=0,this._offset=0,this.value=this._entries[0]}inc(){this._offset++,this._offset>=this._entries[this._index][this._countName]&&(this._index++,this._offset=0),this.value=this._entries[this._index]}}const l=1;t.exports=class extends s{constructor(e){super(),this._tracks=[],this._file=e,this._decoder=null,this._findMoov(0)}_findMoov(e){this._decoder&&this._decoder.destroy();let t=0;this._decoder=r.decode();const n=this._file.createReadStream({start:e});n.pipe(this._decoder);const i=s=>{"moov"===s.type?(this._decoder.removeListener("box",i),this._decoder.decode((e=>{n.destroy();try{this._processMoov(e)}catch(e){e.message="Cannot parse mp4 file: "+e.message,this.emit("error",e)}}))):s.length<4096?(t+=s.length,this._decoder.ignore()):(this._decoder.removeListener("box",i),t+=s.length,n.destroy(),this._decoder.destroy(),this._findMoov(e+t))};this._decoder.on("box",i)}_processMoov(e){const t=e.traks;this._tracks=[],this._hasVideo=!1,this._hasAudio=!1;for(let n=0;n<t.length;n++){const s=t[n],r=s.mdia.minf.stbl,a=r.stsd.entries[0],o=s.mdia.hdlr.handlerType;let l,p;if("vide"===o&&"avc1"===a.type){if(this._hasVideo)continue;this._hasVideo=!0,l="avc1",a.avcC&&(l+="."+a.avcC.mimeCodec),Line truncated
 /*! webtorrent. MIT License. WebTorrent LLC <https://webtorrent.io/opensource> */
-const{EventEmitter:r}=e("events"),a=e("simple-concat"),o=e("create-torrent"),c=e("debug")("webtorrent"),l=e("bittorrent-dht/client"),p=e("load-ip-set"),u=e("run-parallel"),d=e("parse-torrent"),h=e("path"),f=e("simple-peer"),m=e("randombytes"),g=e("speedometer"),b=e("./lib/tcp-pool"),v=e("./lib/torrent"),x=e("./package.json").version,_=x.replace(/\d*./g,(e=>("0"+e%100).slice(-2))).slice(0,4),y=`-WW${_}-`;class w extends r{constructor(e={}){super(),"string"==typeof e.peerId?this.peerId=e.peerId:s.isBuffer(e.peerId)?this.peerId=e.peerId.toString("hex"):this.peerId=s.from(y+m(9).toString("base64")).toString("hex"),this.peerIdBuffer=s.from(this.peerId,"hex"),"string"==typeof e.nodeId?this.nodeId=e.nodeId:s.isBuffer(e.nodeId)?this.nodeId=e.nodeId.toString("hex"):this.nodeId=m(20).toString("hex"),this.nodeIdBuffer=s.from(this.nodeId,"hex"),this._debugId=this.peerId.toString("hex").substring(0,7),this.destroyed=!1,this.listening=!1,this.torrentPort=e.torrentPort||0,this.dhtPort=e.dhtPort||0,this.tracker=void 0!==e.tracker?e.tracker:{},this.torrents=[],this.maxConns=Number(e.maxConns)||55,this._debug("new webtorrent (peerId %s, nodeId %s, port %s)",this.peerId,this.nodeId,this.torrentPort),this.tracker&&("object"!=typeof this.tracker&&(this.tracker={}),e.rtcConfig&&(console.warn("WebTorrent: opts.rtcConfig is deprecated. Use opts.tracker.rtcConfig instead"),this.tracker.rtcConfig=e.rtcConfig),e.wrtc&&(console.warn("WebTorrent: opts.wrtc is deprecated. Use opts.tracker.wrtc instead"),this.tracker.wrtc=e.wrtc),i.WRTC&&!this.tracker.wrtc&&(this.tracker.wrtc=i.WRTC)),"function"==typeof b?this._tcpPool=new b(this):n.nextTick((()=>{this._onListening()})),this._downloadSpeed=g(),this._uploadSpeed=g(),!1!==e.dht&&"function"==typeof l?(this.dht=new l(Object.assign({},{nodeId:this.nodeId},e.dht)),this.dht.once("error",(e=>{this._destroy(e)})),this.dht.once("listening",(()=>{const e=this.dht.address();e&&(this.dhtPort=e.port)})),this.dht.setMaxListeners(0),this.dht.listen(this.dhtPort)):this.dht=!1,this.enableWebSeeds=!1!==e.webSeeds;const t=()=>{this.destroyed||(this.ready=!0,this.emit("ready"))};"function"==typeof p&&null!=e.blocklist?p(e.blocklist,{headers:{"user-agent":`WebTorrent/${x} (https://webtorrent.io)`}},((e,n)=>{if(e)return this.error("Failed to load blocklist: "+e.message);this.blocked=n,t()})):n.nextTick(t)}get downloadSpeed(){return this._downloadSpeed()}get uploadSpeed(){return this._uploadSpeed()}get progress(){const e=this.torrents.filter((e=>1!==e.progress));return e.reduce(((e,t)=>e+t.downloaded),0)/(e.reduce(((e,t)=>e+(t.length||0)),0)||1)}get ratio(){return this.torrents.reduce(((e,t)=>e+t.uploaded),0)/(this.torrents.reduce(((e,t)=>e+t.received),0)||1)}get(e){if(e instanceof v){if(this.torrents.includes(e))return e}else{let t;try{t=d(e)}catch(e){}if(!t)return null;if(!t.infoHash)throw new Error("Invalid torrent identifier");for(const e of this.torrents)if(e.infoHash===t.infoHash)return e}return null}download(e,t,n){return console.warn("WebTorrent: client.download() is deprecated. Use client.add() instead"),this.add(e,t,n)}add(e,t={},n){if(this.destroyed)throw new Error("client is destroyed");"function"==typeof t&&([t,n]=[{},t]);const i=()=>{if(!this.destroyed)for(const e of this.torrents)if(e.infoHash===r.infoHash&&e!==r)return void r._destroy(new Error("Cannot add duplicate torrent "+r.infoHash))},s=()=>{this.destroyed||("function"==typeof n&&n(r),this.emit("torrent",r))};this._debug("add"),t=t?Object.assign({},t):{};const r=new v(e,this,t);return this.torrents.push(r),r.once("_infoHash",i),r.once("ready",s),r.once("close",(function e(){r.removeListener("_infoHash",i),r.removeListener("ready",s),r.removeListener("close",e)})),r}seed(e,t,n){if(this.destroyed)throw new Error("client is destroyed");"function"==typeof t&&([t,n]=[{},t]),this._debug("seed"),(t=t?Object.assign({},t):{}).skipVerify=!0;const i="string"==typeof e;i&&(t.path=h.dirname(e)),t.createdBy||(t.createdBy="WebTorrent/"+_);const s=e=>{this._debug("on seed"),"function"==typeof n&&n(e),e.emit("seed"),this.emit("seed",e)},r=this.add(null,t,(e=>{const t=[t=>{if(i)return t();e.load(c,t)}];this.dht&&t.push((t=>{e.once("dhtAnnounce",t)})),u(t,(t=>{if(!this.destroyed)return t?e._destroy(t):void s(e)}))}));let c;var l;return l=e,"undefined"!=typeof FileList&&l instanceof FileList?e=Array.from(e):Array.isArray(e)||(e=[e]),u(e.map((e=>t=>{!function(e){return"object"==typeof e&&null!=e&&"function"==typeof e.pipe}(e)?t(null,e):a(e,t)})),((e,n)=>{if(!this.destroyed)return e?r._destroy(e):void o.parseInput(n,t,((e,i)=>{if(!this.destroyed){if(e)return r._destroy(e);c=i.map((e=>e.getStream)),o(n,t,((e,t)=>{if(this.destroyed)return;if(e)return r._destroy(e);const n=this.get(t);n?r._destroy(new Error("Cannot add duplicate torrent "+n.infoHash)):r._onTorrentId(t)}))}}))})),r}remove(e,t){this._debug("remove");if(!this.get(e))throw new Error("No torrent with id "+e);this._remove(e,t)}_remove(e,t){const n=this.get(e);n&&(this.torrents.splice(this.torrents.indexLine truncated
+const{EventEmitter:r}=e("events"),a=e("simple-concat"),o=e("create-torrent"),c=e("debug")("webtorrent"),l=e("bittorrent-dht/client"),p=e("load-ip-set"),u=e("run-parallel"),d=e("parse-torrent"),h=e("path"),f=e("simple-peer"),m=e("randombytes"),g=e("speedometer"),b=e("./lib/tcp-pool"),v=e("./lib/torrent"),x=e("./package.json").version,_=x.replace(/\d*./g,(e=>("0"+e%100).slice(-2))).slice(0,4),y=`-WW${_}-`;class w extends r{constructor(e={}){super(),"string"==typeof e.peerId?this.peerId=e.peerId:s.isBuffer(e.peerId)?this.peerId=e.peerId.toString("hex"):this.peerId=s.from(y+m(9).toString("base64")).toString("hex"),this.peerIdBuffer=s.from(this.peerId,"hex"),"string"==typeof e.nodeId?this.nodeId=e.nodeId:s.isBuffer(e.nodeId)?this.nodeId=e.nodeId.toString("hex"):this.nodeId=m(20).toString("hex"),this.nodeIdBuffer=s.from(this.nodeId,"hex"),this._debugId=this.peerId.toString("hex").substring(0,7),this.destroyed=!1,this.listening=!1,this.torrentPort=e.torrentPort||0,this.dhtPort=e.dhtPort||0,this.tracker=void 0!==e.tracker?e.tracker:{},this.torrents=[],this.maxConns=Number(e.maxConns)||55,this._debug("new webtorrent (peerId %s, nodeId %s, port %s)",this.peerId,this.nodeId,this.torrentPort),this.tracker&&("object"!=typeof this.tracker&&(this.tracker={}),e.rtcConfig&&(console.warn("WebTorrent: opts.rtcConfig is deprecated. Use opts.tracker.rtcConfig instead"),this.tracker.rtcConfig=e.rtcConfig),e.wrtc&&(console.warn("WebTorrent: opts.wrtc is deprecated. Use opts.tracker.wrtc instead"),this.tracker.wrtc=e.wrtc),i.WRTC&&!this.tracker.wrtc&&(this.tracker.wrtc=i.WRTC)),"function"==typeof b?this._tcpPool=new b(this):n.nextTick((()=>{this._onListening()})),this._downloadSpeed=g(),this._uploadSpeed=g(),!1!==e.dht&&"function"==typeof l?(this.dht=new l(Object.assign({},{nodeId:this.nodeId},e.dht)),this.dht.once("error",(e=>{this._destroy(e)})),this.dht.once("listening",(()=>{const e=this.dht.address();e&&(this.dhtPort=e.port)})),this.dht.setMaxListeners(0),this.dht.listen(this.dhtPort)):this.dht=!1,this.enableWebSeeds=!1!==e.webSeeds;const t=()=>{this.destroyed||(this.ready=!0,this.emit("ready"))};"function"==typeof p&&null!=e.blocklist?p(e.blocklist,{headers:{"user-agent":`WebTorrent/${x} (https://webtorrent.io)`}},((e,n)=>{if(e)return this.error("Failed to load blocklist: "+e.message);this.blocked=n,t()})):n.nextTick(t)}get downloadSpeed(){return this._downloadSpeed()}get uploadSpeed(){return this._uploadSpeed()}get progress(){const e=this.torrents.filter((e=>1!==e.progress));return e.reduce(((e,t)=>e+t.downloaded),0)/(e.reduce(((e,t)=>e+(t.length||0)),0)||1)}get ratio(){return this.torrents.reduce(((e,t)=>e+t.uploaded),0)/(this.torrents.reduce(((e,t)=>e+t.received),0)||1)}get(e){if(e instanceof v){if(this.torrents.includes(e))return e}else{let t;try{t=d(e)}catch(e){}if(!t)return null;if(!t.infoHash)throw new Error("Invalid torrent identifier");for(const e of this.torrents)if(e.infoHash===t.infoHash)return e}return null}download(e,t,n){return console.warn("WebTorrent: client.download() is deprecated. Use client.add() instead"),this.add(e,t,n)}add(e,t={},n){if(this.destroyed)throw new Error("client is destroyed");"function"==typeof t&&([t,n]=[{},t]);const i=()=>{if(!this.destroyed)for(const e of this.torrents)if(e.infoHash===r.infoHash&&e!==r)return void r._destroy(new Error("Cannot add duplicate torrent "+r.infoHash))},s=()=>{this.destroyed||("function"==typeof n&&n(r),this.emit("torrent",r))};this._debug("add"),t=t?Object.assign({},t):{};const r=new v(e,this,t);return this.torrents.push(r),r.once("_infoHash",i),r.once("ready",s),r.once("close",(function e(){r.removeListener("_infoHash",i),r.removeListener("ready",s),r.removeListener("close",e)})),r}seed(e,t,n){if(this.destroyed)throw new Error("client is destroyed");"function"==typeof t&&([t,n]=[{},t]),this._debug("seed"),(t=t?Object.assign({},t):{}).skipVerify=!0;const i="string"==typeof e;i&&(t.path=h.dirname(e)),t.createdBy||(t.createdBy="WebTorrent/"+_);const s=e=>{this._debug("on seed"),"function"==typeof n&&n(e),e.emit("seed"),this.emit("seed",e)},r=this.add(null,t,(e=>{const t=[t=>{if(i)return t();e.load(c,t)}];this.dht&&t.push((t=>{e.once("dhtAnnounce",t)})),u(t,(t=>{if(!this.destroyed)return t?e._destroy(t):void s(e)}))}));let c;var l;return l=e,"undefined"!=typeof FileList&&l instanceof FileList?e=Array.from(e):Array.isArray(e)||(e=[e]),u(e.map((e=>t=>{!function(e){return"object"==typeof e&&null!=e&&"function"==typeof e.pipe}(e)?t(null,e):a(e,t)})),((e,n)=>{if(!this.destroyed)return e?r._destroy(e):void o.parseInput(n,t,((e,i)=>{if(!this.destroyed){if(e)return r._destroy(e);c=i.map((e=>e.getStream)),o(n,t,((e,t)=>{if(this.destroyed)return;if(e)return r._destroy(e);const n=this.get(t);n?r._destroy(new Error("Cannot add duplicate torrent "+n.infoHash)):r._onTorrentId(t)}))}}))})),r}remove(e,t){this._debug("remove");if(!this.get(e))throw new Error("No torrent with id "+e);this._remove(e,t)}_remove(e,t){const n=this.get(e);n&&(this.torrents.splice(this.torrents.indexLine truncated

index.html

@@ -2,49 +2,56 @@
 
 <head>
   <title>Torrent Parts | Inspect and edit what's in your Torrent file or Magnet link</title>
+  <link rel="stylesheet" href="style.css" />
+  <link href="https://fonts.googleapis.com/css2?family=Alata&display=swap" rel="stylesheet">
   <script async src="https://kit.fontawesome.com/9ca49f101f.js"></script>
 </head>
 
 <body>
 
-  <h1><span class="fad fa-file-search"></span> Torrent Parts</h1>
+  <header>
+    <h1 id="logo">Torrent<span class="fad fa-magnet fa-fw"></span>Parts</h1>
+    <iframe src="https://ghbtns.com/github-btn.html?user=leoherzog&repo=TorrentParts&type=star&count=true" frameborder="0" scrolling="0" width="150" height="20" title="GitHub"></iframe>
+  </header>
 
-  <div class="form-group">
-    <label for="magnet">URL</label>
-    <input id="magnet" type="text" placeholder="magnet:?xt=urn:btih…" />
-    <div>or</div>
-    <label for="torrent">Upload Torrent</label>
+  <div id="startButtons">
+    <input id="magnet" type="text" placeholder="Enter Magnet URL" />
     <input id="torrent" type="file" />
+    <label for="torrent">
+      <span class="fas fa-cloud-upload"></span> Upload Torrent
+    </label>
+    
   </div>
 
   <div id="properties" style="display:none">
 
-    <div class="form-group">
-      <label for="name"><span id="originalSourceIcon"></span>Torrent Name</label>
-      <input id="name" type="text" placeholder="Unspecified" />
-      <button id="reset">
-        <span class="fas fa-minus-circle"></span> Reset
-      </button>
+    <button id="reset">
+      <span class="fas fa-minus-circle"></span> Reset
+    </button>
+
+    <div class="property">
+      <label for="hash">Unique Hash</label>
+      <input id="hash" type="text" placeholder="" disabled/>
     </div>
 
-    <div class="form-group">
+    <div class="property">
+      <label for="name"><span id="originalSourceIcon"></span>Torrent Name</label>
+      <input id="name" type="text" placeholder="Unspecified" />
+    </div>
+
+    <div class="property">
       <label for="created">Created</label>
       <input id="created" type="datetime-local" disabled />
       <label for="createdBy">UTC with</label>
       <input id="createdBy" type="text" placeholder="Unspecified" disabled />
     </div>
 
-    <div class="form-group">
+    <div class="property">
       <label for="comment">Comment</label>
       <input id="comment" type="text" placeholder="Unspecified" />
     </div>
 
-    <div class="form-group">
-      <label for="hash">Unique Hash</label>
-      <input id="hash" type="text" placeholder="" disabled/>
-    </div>
-
-    <div class="form-group">
+    <div class="property">
       <label for="announce">Tracker URLs</label>
       <button id="addTrackers">
         <span class="fa-stack fa-2x">
@@ -61,7 +68,7 @@
       <div id="announce"></div>
     </div>
 
-    <div class="form-group">
+    <div class="property">
       <label for="urlList">Webseed URLs</label>
       <button id="addWebseed" data-type="urlList">
         <span class="fas fa-plus"></span>
@@ -72,7 +79,7 @@
       <div id="urlList"></div>
     </div>
 
-    <div class="form-group">
+    <div class="property">
       <label for="files">Files</label>
       <button id="getFiles">
         <span class="fad fa-chart-network"></span>
@@ -106,7 +113,7 @@
   </div>
 
   <script src="bundle.min.js"></script>
-  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-172544485-1"></script>
+  <script async defer src="https://www.googletagmanager.com/gtag/js?id=UA-172544485-1"></script>
   <script>
     window.dataLayer = window.dataLayer || [];
     function gtag(){dataLayer.push(arguments);}

parse.js

@@ -130,11 +130,11 @@ function display() {
 
   resetProperties();
 
+  hash.value = parsed.infoHash;
   name.value = parsed.name || "";
   if (parsed.created) created.value = parsed.created.toISOString().slice(0, 19);
   createdBy.value = parsed.createdBy || "";
   comment.value = parsed.comment || "";
-  hash.value = parsed.infoHash;
 
   announce.innerHTML = "";
   if (parsed.announce && parsed.announce.length) {
@@ -204,7 +204,7 @@ function display() {
   copyURL.setAttribute('data-clipboard-text', window.location.origin + "#" + parser.toMagnetURI(parsed));
   copyMagnet.setAttribute('data-clipboard-text', parser.toMagnetURI(parsed));
 
-  properties.style.display = 'block';
+  properties.style.display = 'flex';
 
   window.location.hash = parser.toMagnetURI(parsed);
 
@@ -233,24 +233,36 @@ function createFileRow(icon, name, size) {
 function getFontAwesomeIconForMimetype(mimetype) {
   if (!mimetype) return 'file';
   switch (true) {
+    case mimetype.includes("msword"):
+    case mimetype.includes("wordprocessingml"):
+    case mimetype.includes("opendocument.text"):
+    case mimetype.includes("abiword"):
+      return 'file-word';
+    case mimetype.includes("ms-excel"):
+    case mimetype.includes("spreadsheet"):
+      return 'file-powerpoint';
+    case mimetype.includes("powerpoint"):
+    case mimetype.includes("presentation"):
+        return 'file-powerpoint';
     case mimetype.includes("7z-"):
     case mimetype.includes("iso9660"):
     case mimetype.includes("zip"):
+    case mimetype.includes("octet-stream"):
       return 'file-archive';
-    case mimetype.includes("audio"):
-      return 'file-audio';
     case mimetype.includes("csv"):
       return 'file-csv';
-    case mimetype.includes("font"):
-      return 'file-contract';
-    case mimetype.includes("image"):
-      return 'file-image';
     case mimetype.includes("pdf"):
       return 'file-pdf';
+    case mimetype.includes("font"):
+      return 'file-contract';
     case mimetype.includes("text"):
     case mimetype.includes("subrip"):
     case mimetype.includes("vtt"):
       return 'file-alt';
+    case mimetype.includes("audio"):
+      return 'file-audio';
+    case mimetype.includes("image"):
+      return 'file-image';
     case mimetype.includes("video"):
       return 'file-video';
     default:

style.css

@@ -0,0 +1,126 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+
+:root {
+  --gradient: linear-gradient(180deg, #152332, #24384D);
+  --dark-blue: #102030;
+  --light-blue: #495563;
+  --accent: #63A079;
+  --grey: #BDBDBD;
+  --white: #FFF;
+}
+
+body {
+  color: var(--white);
+  background: var(--gradient);
+  font-family: 'Alata', sans-serif;
+}
+
+input {
+  color: var(--white);
+  background: var(--dark-blue);
+  border: 1px solid var(--light-blue);
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 900px;
+  text-overflow: ellipsis;
+}
+
+input:focus {
+  background: var(--light-blue);
+  border: 1px solid var(--grey);
+  transition: ease .2s;
+  outline: none;
+}
+
+input:disabled {
+  color: var(--grey);
+  background: transparent;
+  border: 0;
+}
+
+::placeholder {
+  color: var(--grey);
+}
+
+button {
+  color: var(--white);
+  background: var(--accent);
+  border: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 900px;
+  text-align: center;
+  margin: auto;
+}
+
+button:disabled {
+  filter: brightness(0.6);
+}
+
+header {
+  width: 100%;
+  height: 80px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--grey);
+}
+
+#logo {
+  margin: 0 24px;
+}
+
+#startButtons {
+  margin: 64px auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#startButtons > * {
+  width: 440px;
+}
+
+#torrent {
+  display: none;
+}
+
+label[for="torrent"] {
+  color: var(--white);
+  background: var(--accent);
+  border: 0;
+  padding: 8px;
+  box-sizing: border-box;
+  border-radius: 900px;
+  text-align: center;
+  cursor: pointer;
+}
+
+#properties {
+  background: var(--dark-blue);
+  margin: 80px 160px;
+  padding: 40px;
+  border-radius: 30px;
+  flex-direction: column;
+  justify-content: space-evenly;
+
+}
+
+.property {
+  width: 100%;
+  margin: 20px 0px;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.property > label {
+  width: 40%;
+  text-transform: uppercase;
+}
+
+.property > input {
+  width: 440px;
+}