make things look less ugly

main.js

@@ -0,0 +1,107 @@
+new Vue({
+    el: '#app',
+    data: {
+        name: 'TUSH',
+        flavor: '',
+        path: '',
+        command: '',
+        peersList: [
+        ],
+        optionz2z: 1,
+        optionServer: 1,
+        optionTor: 0,
+        optionGen: 0,
+        optionGenProcLimit: 2,
+        optionEquihashSolver: 'tromp',
+        optionAllowList: [],
+        tempAllowlist: '',
+        customPath: 0,
+        customMinerToAddress: 0,
+        optionName: 'TUSH',
+        optionPubkey: '',
+        optionReward: '1250000000', // in puposhis
+        optionz2z: 1,
+        optionSupply: '21000000',
+        optionBlocktime: 60,
+        optionHalving: 210000,
+        optionRpcAllowIp: '127.0.0.1',
+        optionRpcUser: 'rpcuser',
+        optionRpcPassword: Math.random().toString(36).slice(2),
+        optionShowMetrics: 0,
+        optionDataDir: '',
+        optionZIndex: 0,
+        optionAddrIndex: 0,
+        optionSpentIndex: 0,
+        optionTimestampIndex: 0
+    },
+    methods: {
+        setFlavor: function (option) {
+          this.flavor = option;
+          $('.flavor-banner').show();
+          $(document.body).animate({
+             'scrollTop':   $('#build').offset().top
+          }, 1200);
+        },
+        showPathInput: function () {
+          $('#paths').toggle()
+        },
+        pickPath: function () {
+
+        },
+        showMinerInfo: function () {
+          $('#threads').toggle()
+          $('#minerAddress').toggle()
+
+          if (this.customMinerToAddress == 1) {
+            $('#minerInput').toggle()
+          }
+        },
+        showMinerAddress: function () {
+          $('#minerInput').toggle()
+        },
+        decreaseThreads: function () {
+          if (this.optionGenProcLimit != 0) {
+            this.optionGenProcLimit--
+          }
+        },
+        increaseThreads: function () {
+          this.optionGenProcLimit++
+        },
+        addAllowList: function (value) {
+          this.optionAllowList.push(value)
+          this.tempAllowlist = ''
+        },
+        removeAllowListItem: function (item) {
+          console.log(item)
+          var index = this.optionAllowList.indexOf(item)
+          this.optionAllowList.splice(index, 1)
+        },
+        compile: function () {
+          var currentdate = new Date();
+          var compileTime = currentdate.getDate() + "/"
+                + (currentdate.getMonth()+1)  + "/"
+                + currentdate.getFullYear() + " @ "
+                + currentdate.getHours() + ":"
+                + currentdate.getMinutes() + ":"
+                + currentdate.getSeconds()
+          this.command = "git clone https://git.hush.is/hush/hush3<br/>cd hush3<br/>./build.sh<br/>cd src<br/>./<b>hush-smart-chain</b> -ac_name=" + this.optionName + " -ac_supply=" + this.optionSupply
+                        + " -ac_blocktime=" + this.optionBlocktime + " -ac_private=" + this.optionz2z;
+          this.command += " -ac_reward=" + this.optionReward + " -ac_halving=" + this.optionHalving;
+          if(this.optionPubkey != '')
+            this.command += " -ac_pubkey=" + this.optionPubkey;
+          /*
+          if (this.optionAllowList.length != 0) {
+            this.command = this.conf + "<br /><br />whitelist=" + this.optionAllowList
+          }
+          for (var i = 0; i< this.peersList.length; i++) {
+            if (i == 0) {
+              this.command = this.conf + "<br />"
+            }
+            this.command = this.conf + "<br />addnode=" + this.peersList[i]
+          }
+          */
+          $('#profile').show()
+          $('#clapping').show();
+        }
+      }
+});

style.css

@@ -0,0 +1,307 @@
+body {
+  font-family: 'Poppins', sans-serif;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.column {
+  width: 80%;
+}
+
+.row {
+  width: 95%;
+}
+
+.center {
+  margin: 0 auto;
+}
+
+.button-white {
+  background-color: white;
+  border-color: white;
+}
+
+.button-dark {
+  background-color: #2d2d2d;
+  border-color: #2d2d2d;
+}
+
+.button-white.button-clear,
+.button-white.button-outline {
+  background-color: transparent;
+  color: white;
+}
+
+.button-white.button-outline:hover {
+  background-color: transparent;
+  color: white;
+}
+
+.button-white.button-clear {
+  border-color: transparent;
+}
+
+code.dark {
+  background-color: #2d2d2d;
+  color: #fff;
+}
+
+code.light {
+  color: #2d2d2d;
+}
+
+.jumbo {
+  background-color: #000000;
+  color: #ffffff;
+}
+
+.jumbo .logo {
+  max-width: 1024px;
+  margin: 0 auto;
+}
+
+.jumbo .logo img {
+  height: 30%;
+  max-width: 80%;
+}
+
+.jumbo #flavor {
+  margin: 40px 0px 0px 0px;
+  text-align: center;
+}
+.jumbo #flavor li {
+  display: inline;
+  margin: 0px 5px 0px 5px;
+}
+
+.content {
+  max-width: 1024px;
+  margin: 0 auto;
+  padding: 50px 50px 50px 50px;
+}
+.content form {
+  text-align: left;
+}
+.content form h4 {
+  margin-top: 25px;
+  text-align: center;
+}
+.content form h5 {
+  clear: both;
+  margin-bottom: 0px;
+}
+
+.content form p {
+  margin: 0px 0px 15px 0px;
+}
+.content .toggles li {
+  float: left;
+  display: inline;
+  margin: 0px 10px 20px 0px;
+}
+.content .toggles #threads {
+  display: none;
+  float: left;
+  list-style-type: none;
+}
+.content .toggles .thread-count {
+  position: relative;
+  font-size: 150%;
+  top: 4px;
+  cursor: pointer;
+  cursor: hand;
+  -webkit-touch-callout: none;
+  /* iOS Safari */
+  -webkit-user-select: none;
+  /* Safari */
+  -khtml-user-select: none;
+  /* Konqueror HTML */
+  -moz-user-select: none;
+  /* Firefox */
+  -ms-user-select: none;
+  /* Internet Explorer/Edge */
+  user-select: none;
+}
+.content .profile {
+  display: none;
+  margin-top: 50px;
+  text-align: left;
+  border: 1px solid #cccccc;
+  border-radius: 5px;
+  padding: 5px 10px 5px 10px;
+  word-wrap: none;
+}
+.content .clapping {
+  display: none;
+  margin-top: 50px;
+  text-align: left;
+  border: 0px;
+  border-radius: 5px;
+  padding: 5px 10px 5px 10px;
+  word-wrap: none;
+}
+.content .flavor-banner {
+  display: none;
+  width: 75%;
+  margin: 25px auto;
+  padding: 10px;
+  background: #333;
+  color: #fff;
+  border-radius: 5px;
+}
+
+.content .flavor-banner .path {
+  margin: 5px 0px 0px 0px;
+  font-size: 13px;
+  font-weight: bold;
+  word-wrap: break-word;
+}
+
+/* The switch - the box around the slider */
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 60px;
+  height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+  display: none;
+}
+
+/* The slider */
+.slider {
+  position: absolute;
+  clear: left;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ccc;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 26px;
+  width: 26px;
+  left: 4px;
+  bottom: 4px;
+  background-color: white;
+  -webkit-transition: .4s;
+  transition: .4s;
+}
+
+input:checked + .slider {
+  background-color: #2d2d2d;
+}
+
+input:focus + .slider {
+  box-shadow: 0 0 1px #2d2d2d;
+}
+
+input:checked + .slider:before {
+  -webkit-transform: translateX(26px);
+  -ms-transform: translateX(26px);
+  transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 34px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}
+
+.whitelist {
+  position: relative;
+  list-style-type: none;
+  float: left;
+  left: -5px;
+  right: -5px;
+}
+.whitelist li {
+  position: relative;
+  float: left;
+  font-size: 125%;
+  top: 0px;
+  margin: 0px 5px -15px 5px;
+  padding: 3px 10px 3px 10px;
+  border-radius: 5px;
+  background: #2d2d2d;
+  color: #FFF;
+}
+
+#paths {
+  display: none;
+}
+
+#miner, #minerAddress, #minerInput {
+  display: none;
+  list-style-type: none;
+}
+
+input {
+  color: #606060;
+}
+
+.compile {
+  width: 50%;
+  margin: 20px auto;
+}
+
+.donate {
+  position: relative;
+  margin: 50 auto;
+  margin-bottom: 0px;
+  word-wrap: break-word;
+  font-weight: lighter;
+}
+
+.donate span {
+  position: relative;
+  top: 5px;
+}
+
+.tooltip {
+  position: relative;
+  display: inline;
+}
+.tooltip span {
+  position: absolute;
+  width:140px;
+  color: #2D2D2D;
+  background: #FFF;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  visibility: hidden;
+  border-radius: 6px;
+}
+.tooltip span:after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -8px;
+  width: 0; height: 0;
+  border-bottom: 8px solid #FFF;
+  border-right: 8px solid transparent;
+  border-left: 8px solid transparent;
+}
+#tooltip1:hover.tooltip span {
+  visibility: visible;
+  opacity: 0.8;
+  top: 50px;
+  left: 50%;
+  margin-left: -76px;
+  z-index: 999;
+}