.

3 years ago · b9d476cb0f
4 changed files with 494 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,98 @@
+<html lang="en">
+  <head>
+    <title>HUSH Smart Chain Creator</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="shortcut icon" href="https://hush.is/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/milligram/1.1.0/milligram.min.css'>
+    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Poppins:300,400,500,700'>
+    <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css'>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="app">
+      <div class="jumbo text-center">
+        <div class="logo">
+          <img src="logo.jpg" />
+        </div>
+        <h1>Hush Smart Chain Creator</h1>
+        <h4>Select your flavor</h4>
+        <ul id="flavor">
+          <li><button class="button-white button-outline" v-on:click="setFlavor('z2z')">Full Privacy (z2z)</button></li>
+          <li><button class="button-white button-outline" v-on:click="setFlavor('hybrid')">Hybrid Privacy (Smart contracts)</button></li>
+        </ul>
+      </div>
+      <div id="build" class="content text-center">
+        <h3>Let's build your HSC CLI command</h3>
+        <h5>Update your settings, your command will update on the right.</h5>
+        <div class="row">
+          <div class="column">
+            <form class="center">
+
+              <fieldset>
+                <h4>Options</h4>
+                <div class="row">
+                  <div class="column">
+                    <h5>General</h5>
+                    <p>Customize general Hush settings</p>
+                    <ul class="toggles">
+                      <li class="animated fadeInRight" id="minerAddress" v-on:click="showMinerAddress">
+                        <label>Specific Address</label>
+                        <label class="switch">
+                          <input type="checkbox" v-model="customMinerToAddress" v-on:click="showMinerAddress">
+                          <div class="slider round"></div>
+                        </label>
+                      </li>
+                      <li>
+                        <label>Fully Shielded (z2z)</label>
+                        <label class="switch">
+                          <input type="checkbox" v-model="optionz2z">
+                          <div class="slider round"></div>
+                        </label>
+                      </li>
+                      <li class="animated fadeInRight" id="nameInput" style="border-color: #2d2d2d;">
+                        <label>Name</label>
+                        <input class="input" type="text" v-model="optionName" style="border-color: #2d2d2d;">
+                      </li>
+                      <li class="animated fadeInRight" id="supplyInput" style="border-color: #2d2d2d;">
+                        <label>Initial Supply</label>
+                        <input class="input" type="text" v-model="optionSupply" style="border-color: #2d2d2d;">
+                      </li>
+                      <li class="animated fadeInRight" id="blocktimeInput" style="border-color: #2d2d2d;">
+                        <label>Block time</label>
+                        <input class="input" type="text" v-model="optionBlocktime" style="border-color: #2d2d2d;">
+                      </li>
+                    </ul>
+                    <h5 style="margin-top: 15px;">Addnodes</h5>
+                    <p>Add trusted bootstrap nodes. Remove by clicking.</p>
+                    <input style="border-color: #2d2d2d;" type="text" placeholder="Enter hostname or IP address and hit enter" v-model="tempAllowlist" @keyup.enter="addAllowList(tempAllowlist)">
+                    <ul class="allowlist" v-for="item in optionAllowList" v-bind:item="item">
+                      <li v-on:click="removeAllowListItem(item)">{{ item }}</li>
+                    </ul>
+                  </div>
+                </div>
+              </fieldset>
+            </form>
+            <button class="compile button-dark" v-on:click="compile">Compile</button>
+          </div>
+          <div class="column">
+            <div class="flavor-banner animated fadeInDown">
+              You have selected <span class="bold">{{ flavor }}</span> as your flavor. A wise decision.
+            </div>
+
+            <div id="profile" class="profile animated fadeInDown" v-html="command">
+            </div>
+          </div>
+        </div>
+        <div class="row donate">
+          <div class="column">
+            Developed by <b>Duke Fucking Leto</b><br/>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src='https://unpkg.com/vue'></script>
+    <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
+    <script src='main.js?v=2'></script>
+  </body>
+</html>
--- a/logo.jpg
+++ b/logo.jpg
--- a/main.js
+++ b/main.js
@ -0,0 +1,105 @@
+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',
+        optionSupply: '21000000',
+        optionBlocktime: 60,
+        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
+          if (this.flavor == 'Linux') {
+            this.path = '/home/user/.komodo/HUSH3.conf'
+          } else if (this.flavor == "Mac OS") {
+            this.path = '~/Library/Application Support/Komodo/HUSH3.conf'
+          } else {
+            this.path = 'C:\\Users\\your_username\\AppData\\Roaming\\Komodo\\HUSH3.conf'
+          }
+          $('.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 = "<br/>hush-smart-chain -ac_name=" + this.name;
+          /*
+          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()
+        }
+      }
+});
--- a/style.css
+++ b/style.css
@ -0,0 +1,291 @@
+body {
+  font-family: 'Poppins', sans-serif;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.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 {
+  padding: 20px 20px 75px 20px;
+  background-color: #2d2d2d;
+  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 .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;
+}