From 601082cebe43acc9fd603c13c1a6fc46ca154eb0 Mon Sep 17 00:00:00 2001
From: Joshua Seigler <github@joshua.seigler.net>
Date: Fri, 9 Sep 2016 21:59:40 -0400
Subject: [PATCH] feat: add Dash logo

---
 app.js               | 130 ++++++++++++++++++++++---------------------
 assets/Dash-logo.svg |   2 +
 style.css            |   6 +-
 3 files changed, 73 insertions(+), 65 deletions(-)
 create mode 100644 assets/Dash-logo.svg

diff --git a/app.js b/app.js
index 1fbd645..937e65a 100644
--- a/app.js
+++ b/app.js
@@ -1,71 +1,73 @@
 'use strict';
 
-var socket = io("https://blockchain.masternode.io/");
-var transactionList = document.getElementById('transactionList');
+(function() {
+  function playSound(url){
+    var audio = document.createElement('audio');
+    audio.style.display = "none";
+    audio.src = url;
+    audio.autoplay = true;
+    audio.loop = false;
+    audio.onended = function(){
+      audio.remove() //Remove when played.
+    };
+    document.body.appendChild(audio);
+  }
 
-function playSound(url){
-  var audio = document.createElement('audio');
-  audio.style.display = "none";
-  audio.src = url;
-  audio.autoplay = true;
-  audio.loop = false;
-  audio.onended = function(){
-    audio.remove() //Remove when played.
+  var onTransaction = function(data) {
+    console.log(data);
+    playSound('assets/bell.mp3');
+    var tx = document.createElement('div');
+    tx.className = 'tx';
+    var txValue = document.createElement('a');
+    txValue.className = 'txValue';
+    txValue.href = 'https://blockchain.masternode.io/tx/' + data.txid;
+    txValue.target = '_blank';
+    txValue.setAttribute('rel', 'noopener');
+    var txOutputs = document.createElement('div');
+    txOutputs.className = 'txOutputs';
+    txValue.appendChild(document.createTextNode(data.valueOut));
+    tx.appendChild(txValue);
+    tx.appendChild(txOutputs);
+    var transactions = data.vout.sort(function(a, b) { // sort descending by tx value
+      return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
+    });
+    transactions.forEach(function(value, index, array) {
+      var txOut = document.createElement('div');
+      var outputSatoshis = value[Object.keys(value)[0]];
+      txOut.className = 'txOut';
+      txOut.style.width = (outputSatoshis * 0.00001).toFixed(4) + 'px';
+      txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
+      txOutputs.appendChild(txOut);
+    });
+    transactionList.insertBefore(tx, transactionList.firstChild);
   };
-  document.body.appendChild(audio);
-}
 
-var onTransaction = function(data) {
-  console.log(data);
-  playSound('assets/bell.mp3');
-  var tx = document.createElement('div');
-  tx.className = 'tx';
-  var txValue = document.createElement('a');
-  txValue.className = 'txValue';
-  txValue.href = 'https://blockchain.masternode.io/tx/' + data.txid;
-  txValue.target = '_blank';
-  txValue.setAttribute('rel', 'noopener');
-  var txOutputs = document.createElement('div');
-  txOutputs.className = 'txOutputs';
-  txValue.appendChild(document.createTextNode(data.valueOut));
-  tx.appendChild(txValue);
-  tx.appendChild(txOutputs);
-  var transactions = data.vout.sort(function(a, b) { // sort descending by tx value
-    return b[Object.keys(b)[0]] - a[Object.keys(a)[0]];
+  var onBlock = function(data) {
+    console.log(data);
+    playSound('assets/whoosh.mp3');
+    var newBlock = document.createElement('a');
+    newBlock.className = 'blockDivider';
+    newBlock.href = 'https://blockchain.masternode.io/block/' + data;
+    newBlock.target = '_blank';
+    newBlock.setAttribute('rel', 'noopener');
+    newBlock.appendChild(document.createTextNode(data));
+    transactionList.insertBefore(newBlock, transactionList.firstChild);
+  };
+
+  var socket = io("https://blockchain.masternode.io/");
+  var transactionList = document.getElementById('transactionList');
+
+  socket.on('connect', function() {
+    document.getElementById('connectionStatus').className = 'is-connected';
+    // Join the room.
+    socket.emit('subscribe', 'inv');
+  })
+  socket.on('tx', onTransaction);
+  socket.on('block', onBlock);
+  socket.on('disconnect', function() {
+    document.getElementById('connectionStatus').className = 'is-disconnected';
   });
-  transactions.forEach(function(value, index, array) {
-    var txOut = document.createElement('div');
-    var outputSatoshis = value[Object.keys(value)[0]];
-    txOut.className = 'txOut';
-    txOut.style.width = (outputSatoshis * 0.00001).toFixed(4) + 'px';
-    txOut.title = (value[Object.keys(value)[0]] * 0.00000001);
-    txOutputs.appendChild(txOut);
+  socket.on('reconnecting', function() {
+    document.getElementById('connectionStatus').className = 'is-connecting';
   });
-  transactionList.insertBefore(tx, transactionList.firstChild);
-};
-
-var onBlock = function(data) {
-  console.log(data);
-  playSound('assets/whoosh.mp3');
-  var newBlock = document.createElement('a');
-  newBlock.className = 'blockDivider';
-  newBlock.href = 'https://blockchain.masternode.io/block/' + data;
-  newBlock.target = '_blank';
-  newBlock.setAttribute('rel', 'noopener');
-  newBlock.appendChild(document.createTextNode(data));
-  transactionList.insertBefore(newBlock, transactionList.firstChild);
-};
-
-socket.on('connect', function() {
-  document.getElementById('connectionStatus').className = 'is-connected';
-  // Join the room.
-  socket.emit('subscribe', 'inv');
-})
-socket.on('tx', onTransaction);
-socket.on('block', onBlock);
-socket.on('disconnect', function() {
-  document.getElementById('connectionStatus').className = 'is-disconnected';
-});
-socket.on('reconnecting', function() {
-  document.getElementById('connectionStatus').className = 'is-connecting';
-});
+})();
diff --git a/assets/Dash-logo.svg b/assets/Dash-logo.svg
new file mode 100644
index 0000000..e999cc9
--- /dev/null
+++ b/assets/Dash-logo.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg id="Layer_1" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 226.777 226.777" xml:space="preserve" height="226.78px" viewBox="0 0 226.777 226.777" width="226.78px" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata id="metadata9"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/><dc:title/></cc:Work></rdf:RDF></metadata><path id="path3" fill="#fff" opacity="0.2" d="m113.39 0c-62.623 0-113.39 50.767-113.39 113.39 0 62.62 50.766 113.39 113.39 113.39 62.62 0 113.39-50.77 113.39-113.39 0-62.623-50.77-113.39-113.39-113.39zm0 6.9668a106.42 106.42 0 0 1 106.42 106.42 106.42 106.42 0 0 1 -106.42 106.42 106.42 106.42 0 0 1 -106.42 -106.42 106.42 106.42 0 0 1 106.42 -106.42zm-35.624 69.328l-5.723 18.541h75.787l-11.41 37.114h-76.397l-5.72 18.54h81.227c7.94 0 10.06-1.39 15.74-4.71 5.67-3.33 10.1-9.14 12.5-16.06s8.26-26.44 10.06-32.947c1.8-6.506 2.49-8.998 0-13.839-2.49-4.847-7.61-6.639-11.49-6.639h-84.574zm-21.204 28.505l-5.236 17.03h45.264l5.24-17.03h-45.268z"/></svg>
diff --git a/style.css b/style.css
index 407ab98..ce51381 100644
--- a/style.css
+++ b/style.css
@@ -4,7 +4,11 @@ body {
   box-sizing: border-box;
   font-family: sans-serif;
   font-size: 140%;
-  background-image: linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%));
+  background-image: url('assets/Dash-logo.svg'), linear-gradient(to bottom right, hsl(208, 73%, 43%), hsl(208, 86.5%, 21.5%));
+  background-size: 50vmin auto, cover;
+  background-position: center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
   background-color: hsl(208, 73%, 43%);
   color: white;
   min-height: 100vh;