Stub new design

stub-design/.gitignore

@@ -0,0 +1 @@
+node_modules

stub-design/assets/javascripts/swipe.js

@@ -0,0 +1,570 @@
+/*
+ * Swipe 2.0
+ *
+ * Brad Birdsall
+ * Copyright 2013, MIT License
+ *
+*/
+
+function Swipe(container, options) {
+
+  "use strict";
+
+  // utilities
+  var noop = function() {}; // simple no operation function
+  var offloadFn = function(fn) { setTimeout(fn || noop, 0) }; // offload a functions execution
+
+  // check browser capabilities
+  var browser = {
+    addEventListener: !!window.addEventListener,
+    touch: ('ontouchstart' in window) || window.DocumentTouch && document instanceof DocumentTouch,
+    transitions: (function(temp) {
+      var props = ['transitionProperty', 'WebkitTransition', 'MozTransition', 'OTransition', 'msTransition'];
+      for ( var i in props ) if (temp.style[ props[i] ] !== undefined) return true;
+      return false;
+    })(document.createElement('swipe'))
+  };
+
+  // quit if no root element
+  if (!container) return;
+  var element = container.children[0];
+  var slides, slidePos, width, length;
+  options = options || {};
+  var index = parseInt(options.startSlide, 10) || 0;
+  var speed = options.speed || 300;
+  options.continuous = options.continuous !== undefined ? options.continuous : true;
+
+  function setup() {
+
+    // cache slides
+    slides = element.children;
+    length = slides.length;
+
+    // set continuous to false if only one slide
+    if (slides.length < 2) options.continuous = false;
+
+    //special case if two slides
+    if (browser.transitions && options.continuous && slides.length < 3) {
+      element.appendChild(slides[0].cloneNode(true));
+      element.appendChild(element.children[1].cloneNode(true));
+      slides = element.children;
+    }
+
+    // create an array to store current positions of each slide
+    slidePos = new Array(slides.length);
+
+    // determine width of each slide
+    width = container.getBoundingClientRect().width || container.offsetWidth;
+
+    element.style.width = (slides.length * width) + 'px';
+
+    // stack elements
+    var pos = slides.length;
+    while(pos--) {
+
+      var slide = slides[pos];
+
+      slide.style.width = width + 'px';
+      slide.setAttribute('data-index', pos);
+
+      if (browser.transitions) {
+        slide.style.left = (pos * -width) + 'px';
+        move(pos, index > pos ? -width : (index < pos ? width : 0), 0);
+      }
+
+    }
+
+    // reposition elements before and after index
+    if (options.continuous && browser.transitions) {
+      move(circle(index-1), -width, 0);
+      move(circle(index+1), width, 0);
+    }
+
+    if (!browser.transitions) element.style.left = (index * -width) + 'px';
+
+    container.style.visibility = 'visible';
+
+  }
+
+  function prev() {
+
+    if (options.continuous) slide(index-1);
+    else if (index) slide(index-1);
+
+  }
+
+  function next() {
+
+    if (options.continuous) slide(index+1);
+    else if (index < slides.length - 1) slide(index+1);
+
+  }
+
+  function circle(index) {
+
+    // a simple positive modulo using slides.length
+    return (slides.length + (index % slides.length)) % slides.length;
+
+  }
+
+  function slide(to, slideSpeed) {
+
+    // do nothing if already on requested slide
+    if (index == to) return;
+
+    if (browser.transitions) {
+
+      var direction = Math.abs(index-to) / (index-to); // 1: backward, -1: forward
+
+      // get the actual position of the slide
+      if (options.continuous) {
+        var natural_direction = direction;
+        direction = -slidePos[circle(to)] / width;
+
+        // if going forward but to < index, use to = slides.length + to
+        // if going backward but to > index, use to = -slides.length + to
+        if (direction !== natural_direction) to =  -direction * slides.length + to;
+
+      }
+
+      var diff = Math.abs(index-to) - 1;
+
+      // move all the slides between index and to in the right direction
+      while (diff--) move( circle((to > index ? to : index) - diff - 1), width * direction, 0);
+
+      to = circle(to);
+
+      move(index, width * direction, slideSpeed || speed);
+      move(to, 0, slideSpeed || speed);
+
+      if (options.continuous) move(circle(to - direction), -(width * direction), 0); // we need to get the next in place
+
+    } else {
+
+      to = circle(to);
+      animate(index * -width, to * -width, slideSpeed || speed);
+      //no fallback for a circular continuous if the browser does not accept transitions
+    }
+
+    index = to;
+    offloadFn(options.callback && options.callback(index, slides[index]));
+  }
+
+  function move(index, dist, speed) {
+
+    translate(index, dist, speed);
+    slidePos[index] = dist;
+
+  }
+
+  function translate(index, dist, speed) {
+
+    var slide = slides[index];
+    var style = slide && slide.style;
+
+    if (!style) return;
+
+    style.webkitTransitionDuration =
+    style.MozTransitionDuration =
+    style.msTransitionDuration =
+    style.OTransitionDuration =
+    style.transitionDuration = speed + 'ms';
+
+    style.webkitTransform = 'translate(' + dist + 'px,0)' + 'translateZ(0)';
+    style.msTransform =
+    style.MozTransform =
+    style.OTransform = 'translateX(' + dist + 'px)';
+
+  }
+
+  function animate(from, to, speed) {
+
+    // if not an animation, just reposition
+    if (!speed) {
+
+      element.style.left = to + 'px';
+      return;
+
+    }
+
+    var start = +new Date;
+
+    var timer = setInterval(function() {
+
+      var timeElap = +new Date - start;
+
+      if (timeElap > speed) {
+
+        element.style.left = to + 'px';
+
+        if (delay) begin();
+
+        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+        clearInterval(timer);
+        return;
+
+      }
+
+      element.style.left = (( (to - from) * (Math.floor((timeElap / speed) * 100) / 100) ) + from) + 'px';
+
+    }, 4);
+
+  }
+
+  // setup auto slideshow
+  var delay = options.auto || 0;
+  var interval;
+
+  function begin() {
+
+    interval = setTimeout(next, delay);
+
+  }
+
+  function stop() {
+
+    delay = 0;
+    clearTimeout(interval);
+
+  }
+
+
+  // setup initial vars
+  var start = {};
+  var delta = {};
+  var isScrolling;
+
+  // setup event capturing
+  var events = {
+
+    handleEvent: function(event) {
+
+      switch (event.type) {
+        case 'touchstart': this.start(event); break;
+        case 'touchmove': this.move(event); break;
+        case 'touchend': offloadFn(this.end(event)); break;
+        case 'webkitTransitionEnd':
+        case 'msTransitionEnd':
+        case 'oTransitionEnd':
+        case 'otransitionend':
+        case 'transitionend': offloadFn(this.transitionEnd(event)); break;
+        case 'resize': offloadFn(setup); break;
+      }
+
+      if (options.stopPropagation) event.stopPropagation();
+
+    },
+    start: function(event) {
+
+      var touches = event.touches[0];
+
+      // measure start values
+      start = {
+
+        // get initial touch coords
+        x: touches.pageX,
+        y: touches.pageY,
+
+        // store time to determine touch duration
+        time: +new Date
+
+      };
+
+      // used for testing first move event
+      isScrolling = undefined;
+
+      // reset delta and end measurements
+      delta = {};
+
+      // attach touchmove and touchend listeners
+      element.addEventListener('touchmove', this, false);
+      element.addEventListener('touchend', this, false);
+
+    },
+    move: function(event) {
+
+      // ensure swiping with one touch and not pinching
+      if ( event.touches.length > 1 || event.scale && event.scale !== 1) return
+
+      if (options.disableScroll) event.preventDefault();
+
+      var touches = event.touches[0];
+
+      // measure change in x and y
+      delta = {
+        x: touches.pageX - start.x,
+        y: touches.pageY - start.y
+      }
+
+      // determine if scrolling test has run - one time test
+      if ( typeof isScrolling == 'undefined') {
+        isScrolling = !!( isScrolling || Math.abs(delta.x) < Math.abs(delta.y) );
+      }
+
+      // if user is not trying to scroll vertically
+      if (!isScrolling) {
+
+        // prevent native scrolling
+        event.preventDefault();
+
+        // stop slideshow
+        stop();
+
+        // increase resistance if first or last slide
+        if (options.continuous) { // we don't add resistance at the end
+
+          translate(circle(index-1), delta.x + slidePos[circle(index-1)], 0);
+          translate(index, delta.x + slidePos[index], 0);
+          translate(circle(index+1), delta.x + slidePos[circle(index+1)], 0);
+
+        } else {
+
+          delta.x =
+            delta.x /
+              ( (!index && delta.x > 0               // if first slide and sliding left
+                || index == slides.length - 1        // or if last slide and sliding right
+                && delta.x < 0                       // and if sliding at all
+              ) ?
+              ( Math.abs(delta.x) / width + 1 )      // determine resistance level
+              : 1 );                                 // no resistance if false
+
+          // translate 1:1
+          translate(index-1, delta.x + slidePos[index-1], 0);
+          translate(index, delta.x + slidePos[index], 0);
+          translate(index+1, delta.x + slidePos[index+1], 0);
+        }
+
+      }
+
+    },
+    end: function(event) {
+
+      // measure duration
+      var duration = +new Date - start.time;
+
+      // determine if slide attempt triggers next/prev slide
+      var isValidSlide =
+            Number(duration) < 250               // if slide duration is less than 250ms
+            && Math.abs(delta.x) > 20            // and if slide amt is greater than 20px
+            || Math.abs(delta.x) > width/2;      // or if slide amt is greater than half the width
+
+      // determine if slide attempt is past start and end
+      var isPastBounds =
+            !index && delta.x > 0                            // if first slide and slide amt is greater than 0
+            || index == slides.length - 1 && delta.x < 0;    // or if last slide and slide amt is less than 0
+
+      if (options.continuous) isPastBounds = false;
+
+      // determine direction of swipe (true:right, false:left)
+      var direction = delta.x < 0;
+
+      // if not scrolling vertically
+      if (!isScrolling) {
+
+        if (isValidSlide && !isPastBounds) {
+
+          if (direction) {
+
+            if (options.continuous) { // we need to get the next in this direction in place
+
+              move(circle(index-1), -width, 0);
+              move(circle(index+2), width, 0);
+
+            } else {
+              move(index-1, -width, 0);
+            }
+
+            move(index, slidePos[index]-width, speed);
+            move(circle(index+1), slidePos[circle(index+1)]-width, speed);
+            index = circle(index+1);
+
+          } else {
+            if (options.continuous) { // we need to get the next in this direction in place
+
+              move(circle(index+1), width, 0);
+              move(circle(index-2), -width, 0);
+
+            } else {
+              move(index+1, width, 0);
+            }
+
+            move(index, slidePos[index]+width, speed);
+            move(circle(index-1), slidePos[circle(index-1)]+width, speed);
+            index = circle(index-1);
+
+          }
+
+          options.callback && options.callback(index, slides[index]);
+
+        } else {
+
+          if (options.continuous) {
+
+            move(circle(index-1), -width, speed);
+            move(index, 0, speed);
+            move(circle(index+1), width, speed);
+
+          } else {
+
+            move(index-1, -width, speed);
+            move(index, 0, speed);
+            move(index+1, width, speed);
+          }
+
+        }
+
+      }
+
+      // kill touchmove and touchend event listeners until touchstart called again
+      element.removeEventListener('touchmove', events, false)
+      element.removeEventListener('touchend', events, false)
+
+    },
+    transitionEnd: function(event) {
+
+      if (parseInt(event.target.getAttribute('data-index'), 10) == index) {
+
+        if (delay) begin();
+
+        options.transitionEnd && options.transitionEnd.call(event, index, slides[index]);
+
+      }
+
+    }
+
+  }
+
+  // trigger setup
+  setup();
+
+  // start auto slideshow if applicable
+  if (delay) begin();
+
+
+  // add event listeners
+  if (browser.addEventListener) {
+
+    // set touchstart event on element
+    if (browser.touch) element.addEventListener('touchstart', events, false);
+
+    if (browser.transitions) {
+      element.addEventListener('webkitTransitionEnd', events, false);
+      element.addEventListener('msTransitionEnd', events, false);
+      element.addEventListener('oTransitionEnd', events, false);
+      element.addEventListener('otransitionend', events, false);
+      element.addEventListener('transitionend', events, false);
+    }
+
+    // set resize event on window
+    window.addEventListener('resize', events, false);
+
+  } else {
+
+    window.onresize = function () { setup() }; // to play nice with old IE
+
+  }
+
+  // expose the Swipe API
+  return {
+    setup: function() {
+
+      setup();
+
+    },
+    slide: function(to, speed) {
+
+      // cancel slideshow
+      stop();
+
+      slide(to, speed);
+
+    },
+    prev: function() {
+
+      // cancel slideshow
+      stop();
+
+      prev();
+
+    },
+    next: function() {
+
+      // cancel slideshow
+      stop();
+
+      next();
+
+    },
+    stop: function() {
+
+      // cancel slideshow
+      stop();
+
+    },
+    getPos: function() {
+
+      // return current index position
+      return index;
+
+    },
+    getNumSlides: function() {
+
+      // return total number of slides
+      return length;
+    },
+    kill: function() {
+
+      // cancel slideshow
+      stop();
+
+      // reset element
+      element.style.width = '';
+      element.style.left = '';
+
+      // reset slides
+      var pos = slides.length;
+      while(pos--) {
+
+        var slide = slides[pos];
+        slide.style.width = '';
+        slide.style.left = '';
+
+        if (browser.transitions) translate(pos, 0, 0);
+
+      }
+
+      // removed event listeners
+      if (browser.addEventListener) {
+
+        // remove current event listeners
+        element.removeEventListener('touchstart', events, false);
+        element.removeEventListener('webkitTransitionEnd', events, false);
+        element.removeEventListener('msTransitionEnd', events, false);
+        element.removeEventListener('oTransitionEnd', events, false);
+        element.removeEventListener('otransitionend', events, false);
+        element.removeEventListener('transitionend', events, false);
+        window.removeEventListener('resize', events, false);
+
+      }
+      else {
+
+        window.onresize = null;
+
+      }
+
+    }
+  }
+
+}
+
+
+if ( window.jQuery || window.Zepto ) {
+  (function($) {
+    $.fn.Swipe = function(params) {
+      return this.each(function() {
+        $(this).data('Swipe', new Swipe($(this)[0], params));
+      });
+    }
+  })( window.jQuery || window.Zepto )
+}

stub-design/assets/stylesheets/application.scss

@@ -0,0 +1 @@
+@import './application/**/*';

stub-design/assets/stylesheets/application/_0_variables.scss

@@ -0,0 +1,10 @@
+$container-width: 960px;
+$tablet-width: 768px;
+$mobile-width: 414px;
+$footer-height: 60px;
+
+$desktop-indent: 30px;
+$tablet-indent: 20px;
+$mobile-indent: 15px;
+
+$input-height: 40px;

stub-design/assets/stylesheets/application/_1_mixins.scss

@@ -0,0 +1,10 @@
+@mixin image-2x($image, $width: 100%, $height: 100%) {
+  @media (min--moz-device-pixel-ratio: 1.3),
+         (-o-min-device-pixel-ratio: 2.6/2),
+         (-webkit-min-device-pixel-ratio: 1.3),
+         (min-device-pixel-ratio: 1.3),
+         (min-resolution: 1.3dppx) {
+    background-image: url($image);
+    background-size: $width $height;
+  }
+}

stub-design/assets/stylesheets/application/_2_placeholders.scss

@@ -0,0 +1,66 @@
+%full-width {
+  left: 0;
+  right: 0;
+}
+
+%logos {
+  @include image-2x('../images/logos@2x.png', 149px, 59px);
+  display: block;
+  background-image: url(../images/logos.png);
+}
+
+%white-block {
+  transition: 0.3s box-shadow;
+  margin-bottom: $desktop-indent;
+  border-radius: 8px;
+  box-shadow: 0 10px 10px 0 fade-out(#326cb5, 0.92);
+  padding: $desktop-indent;
+  background-color: #fff;
+
+  @media screen and (max-width: $tablet-width) {
+    margin-bottom: $tablet-indent;
+    padding: $tablet-indent;
+  }
+}
+
+%form-el {
+  transition: 0.3s background-color,
+              0.3s border-color;
+  width: 100%;
+  height: $input-height;
+  outline: none;
+  border-radius: 3px;
+  border: 1px solid #e5eef9;
+  box-sizing: border-box;
+  padding: 0 10px;
+  background-color: #fff;
+  color: #444;
+  font-family: 'Open Sans', sans-serif;
+  font-size: 14px;
+}
+
+%button {
+  cursor: pointer;
+  display: inline-block;
+  transition: 0.3s opacity;
+  box-sizing: border-box;
+  border: 0;
+  outline: none;
+  padding: 0 15px;
+  text-transform: uppercase;
+  line-height: 36px;
+  font-size: 13px;
+  font-weight: bold;
+  font-family: 'Open Sans', sans-serif;
+
+  &:hover {
+    opacity: 0.9;
+    text-decoration: none;
+  }
+
+  &_icon {
+    padding: 0 15px 0 33px;
+    background-repeat: no-repeat;
+    background-position: left 15px center;
+  }
+}

stub-design/assets/stylesheets/application/_3_fonts.scss

@@ -0,0 +1,32 @@
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 600;
+  src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v14/MTP_ySUJH_bn48VBG8sNShampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
+}
+
+@font-face {
+  font-family: 'Open Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v13/k3k702ZOKiLJc3WVjuplzBampu5_7CjHW5spxoeN3Vs.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
+html,
+body {
+  color: #444;
+  line-height: 1;
+  font-size: 14px;
+  font-family: 'Open Sans', sans-serif;
+  -webkit-font-smoothing: antialiased;
+}

stub-design/assets/stylesheets/application/_4_base.scss

@@ -0,0 +1,104 @@
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html {
+  height: 100%;
+}
+
+p, h1, h2, h3, h4 {
+  margin: 0;
+  padding: 0;
+  font-family: 'Open Sans', sans-serif;
+}
+
+body {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  box-sizing: border-box;
+  padding-bottom: $footer-height + 10px;
+  background-color: #f4f9ff;
+
+  @media screen and (max-width: $mobile-width) {
+    padding-bottom: $footer-height + 30px;
+  }
+}
+
+a {
+  color: #08b3f2;
+  text-decoration: none;
+  font-size: 14px;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+p {
+  color: #444;
+  font-size: 14px;
+}
+
+hr {
+  display: block;
+  width: 100%;
+  height: 1px;
+  margin: 10px 0 30px;
+  border: 0;
+  background-color: #e5eef9;
+}
+
+.center {
+  text-align: center;
+}
+
+.left {
+  float: left;
+  width: 48%;
+}
+
+.right {
+  float: right;
+  width: 48%;
+}
+
+.left,
+.right {
+  @media screen and (max-width: $mobile-width) {
+    float: none;
+    width: 100%;
+  }
+}
+
+.hidden {
+  overflow: hidden;
+}
+
+.container {
+  width: $container-width;
+  margin: 0 auto;
+  box-sizing: border-box;
+
+  @media screen and (max-width: $container-width) {
+    width: 100%;
+    padding: 0 10px;
+  }
+}
+
+.title {
+  margin-bottom: 30px;
+  color: #38454f;
+  font-size: 30px;
+  font-weight: normal;
+
+  @media screen and (max-width: $tablet-width) {
+    font-size: 28px;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    font-size: 26px;
+  }
+}

stub-design/assets/stylesheets/application/ballots/_0_placeholders.scss

@@ -0,0 +1,7 @@
+%_button {
+  @extend %button;
+  border-radius: 2px;
+  padding: 0 13px;
+  font-size: 13px;
+  font-weight: bold;
+}

stub-design/assets/stylesheets/application/ballots/_1_base.scss

@@ -0,0 +1,121 @@
+.ballots {
+  .title {
+    margin-bottom: 50px;
+
+    @media screen and (max-width: $tablet-width) {
+      margin-bottom: $tablet-indent;
+    }
+
+    @media screen and (max-width: $mobile-width) {
+      margin-bottom: $mobile-indent;
+    }
+  }
+
+  &-i {
+    @extend %white-block;
+
+    &:hover {
+      box-shadow: 0 11px 11px 0 fade-out(#326cb5, 0.85);
+    }
+
+    &-scale {
+      display: flex;
+      justify-content: space-between;
+      margin-top: $desktop-indent;
+      border-top: 1px solid #e5eef9;
+      padding: $desktop-indent 0;
+
+      @media screen and (max-width: $tablet-width) {
+        display: block;
+        margin-top: $tablet-indent;
+        padding: $tablet-indent 0;
+      }
+
+      @media screen and (max-width: $mobile-width) {
+        margin-top: $mobile-indent;
+        padding: $mobile-indent 0;
+      }
+
+      &-column {
+        display: flex;
+        justify-content: space-between;
+        width: 48%;
+
+        @media screen and (max-width: $tablet-width) {
+          overflow: hidden;
+          width: 100%;
+        }
+
+        &:last-child {
+          @media screen and (max-width: $tablet-width) {
+            flex-direction: row-reverse;
+            margin-top: 30px;
+          }
+        }
+      }
+    }
+
+    &--name {
+      color: #333;
+      font-weight: bold;
+    }
+
+    &--created {
+      padding-left: 20px;
+      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAw1BMVEWAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6OAl6M9jT1MAAAAQHRSTlMAAQIDBQYHDA0bHB8gISQmJyg+P0BGR0lKU1RZYmNrbHV2iYqLo6Spqqusra7Cw8TFysvM29zk5ufo6/Lz+Pn8DzgVHgAAATNJREFUeNplk+1agkAQhQfRykQTrJTEUjSCvtTQECPk/q+qPQ7LsnR+7DOzL898LiRlOP46zfN0vXQM0tXydkWlndeqs/620LTtK3Z7LBo6OpLd5fDzl6nVubSnIXv3zIY/8N4HVGrwBj8bwjaR77SgmhYn5DWF5eE7ZoribkZkoIeI78ZJMmYrQkcGjZD9mq+SokjY6qKqEfniDIiFYMR6FqZPn+J8+A9dYX5QKs5eBaFz3p4wUkLwizrkvB2UcoZXJUwYHiqIsDclnBzAvicyrFYQpBW0lK0oqVbkEHR1fzEEHl/YhCHG1yKaoYi5zubl4Mn8wsqe6uwRK4tNmHaG717VsiP4mV1uih9G4FrttuUG7GGGTLOioUwyRI51Ftv6o94rtNcfNbCz2uB32KycCv0BfU5XCrQEyKwAAAAASUVORK5CYII=);
+      background-size: 14px 14px;
+      background-repeat: no-repeat;
+      background-position: left center;
+      color: #8197a2;
+      font-size: 12px;
+    }
+
+    &--see-all-proposal {
+      display: inline-block;
+      margin-top: 5px;
+    }
+
+    &--time {
+      color: #333;
+      font-size: 24px;
+      font-weight: bold;
+
+      @media screen and (max-width: $tablet-width) {
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+      }
+    }
+
+    &--to-close {
+      color: #333;
+      text-transform: uppercase;
+
+      @media screen and (max-width: $tablet-width) {
+        display: inline-block;
+        vertical-align: middle;
+      }
+    }
+
+    &--vote {
+      @extend %_button;
+
+      &_yes {
+        margin-right: 15px;
+        background-color: fade-out(#08b3f2, 0.9);
+      }
+
+      &_no {
+        margin-left: 15px;
+        background-color: fade-out(#6d2eae, 0.9);
+        color: #6d2eae;
+
+        @media screen and (max-width: $tablet-width) {
+          float: left;
+          margin-left: 0;
+          margin-right: 15px;
+        }
+      }
+    }
+  }
+}

stub-design/assets/stylesheets/application/ballots/about.scss

@@ -0,0 +1,103 @@
+.ballots-about {
+  font-size: 0;
+
+  @media screen and (max-width: $tablet-width) {
+    display: table;
+    width: 100%;
+  }
+
+  $this: &;
+
+  p {
+    line-height: 28px;
+  }
+
+  &-i {
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    box-sizing: border-box;
+
+    &:not(&_time) {
+      padding-right: 10px;
+
+      @media screen and (max-width: $tablet-width) {
+        padding-right: 0;
+      }
+    }
+
+    @media screen and (max-width: $tablet-width) {
+      display: table-row;
+      width: 100% !important;
+    }
+
+    &_name {
+      width: 25%;
+    }
+
+    &_proposal {
+      width: 30%;
+    }
+
+    &_mining-key {
+      width: 30%;
+      word-break: break-all;
+    }
+
+    &_time {
+      width: 15%;
+      text-align: right;
+
+      @media screen and (max-width: $tablet-width) {
+        text-align: left;
+      }
+
+      #{$this}-i--title {
+        text-align: right;
+
+        @media screen and (max-width: $tablet-width) {
+          text-align: left;
+        }
+      }
+    }
+
+    &--title {
+      position: absolute;
+      z-index: 1;
+      left: 0;
+      right: 0;
+      top: -#{$desktop-indent * 2};
+      opacity: 0.6;
+      color: #38454f;
+      text-transform: uppercase;
+      font-size: 13px;
+
+      @media screen and (max-width: $tablet-width) {
+        position: relative;
+        left: auto;
+        right: auto;
+        top: auto;
+        white-space: nowrap;
+      }
+    }
+  }
+
+  &-td {
+    @media screen and (max-width: $tablet-width) {
+      display: table-cell;
+      vertical-align: top;
+    }
+
+    &:first-child {
+      @media screen and (max-width: $tablet-width) {
+        padding-right: 20px;
+      }
+    }
+
+    #{$this}-i:not(:last-child) & {
+      @media screen and (max-width: $tablet-width) {
+        padding-bottom: 10px;
+      }
+    }
+  }
+}

stub-design/assets/stylesheets/application/ballots/footer.scss

@@ -0,0 +1,32 @@
+.ballots-footer {
+  display: flex;
+  align-items: center;
+
+  @media screen and (max-width: $tablet-width) {
+    padding-top: $tablet-indent;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    flex-direction: column-reverse;
+    padding-top: $mobile-indent;
+  }
+
+  p {
+    line-height: 18px;
+    color: #8197a2;
+  }
+
+  &-finalize {
+    @extend %_button;
+    margin-right: 20px;
+    background-color: fade-out(#08b3f2, 0.9);
+    white-space: nowrap;
+
+    @media screen and (max-width: $mobile-width) {
+      width: 100%;
+      margin-right: 0;
+      margin-top: $mobile-indent;
+      text-align: center;
+    }
+  }
+}

stub-design/assets/stylesheets/application/controls.scss

@@ -0,0 +1,122 @@
+label {
+  display: inline-block;
+  margin-bottom: 15px;
+  color: #8197a2;
+  font-size: 14px;
+  font-family: 'Open Sans', sans-serif;
+}
+
+input {
+  @extend %form-el;
+
+  &:focus {
+    border-color: #08b3f2;
+  }
+
+  &[type='radio'] {
+    display: none;
+  }
+}
+
+select {
+  @include image-2x('../images/select@2x.png', 8px, 4px);
+  @extend %form-el;
+  appearance: none;
+  padding-right: 30px;
+  background-repeat: no-repeat;
+  background-position: right 13px center;
+  background-image: url(../images/select.png);
+}
+
+button {
+  @extend %button;
+  background-color: fade-out(#08b3f2, 0.9);
+  color: #08b3f2;
+}
+
+.radio {
+  @extend %form-el;
+  transition: 0.3s color,
+              0.3s background-color,
+              0.3s border-color;
+  cursor: pointer;
+  position: relative;
+  margin-bottom: 0;
+  line-height: $input-height;
+
+  input[type='radio']:checked + & {
+    border-color: #08b3f2;
+    background-color: fade-out(#08b3f2, 0.9);
+    color: #08b3f2;
+  }
+
+  &_icon {
+    padding-left: 37px;
+    background-repeat: no-repeat;
+    background-size: 16px 16px;
+    background-position: left 11px center;
+  }
+
+  &_add {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAAPElEQVR4Ae3RIQKAAAzDwG5k/f+TwYIoEsROx0V3BaUEGyW+bPBVUDighCPeglGPg6P3xW8D7FHS8/x3AhBhBV+OMM67AAAAAElFTkSuQmCC);
+  }
+
+  &_remove {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAFVBMVEUAsvUAsvUAsvUAsvUAsvUAsvUAsvVmJ/ytAAAABnRSTlMASUrk5udXTd49AAAATklEQVR4Ae3SQQqAMAxE0Wmc5P5H1k2gfijFnaBvWf5mStSGa+Ihct14F6QosiZH6D24nzw4j7wLEvsb/qMugn77g28G9Czw6h5b5PoeT61VCXCp8qCYAAAAAElFTkSuQmCC);
+  }
+
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    border-radius: 50%;
+  }
+
+  &:before {
+    transition: 0.3s border-color;
+    left: -40px;
+    top: ($input-height - 24px) / 2;
+    width: 24px;
+    height: 24px;
+    box-sizing: border-box;
+    border: 1px solid #e5eef9;
+
+    input[type='radio']:checked + & {
+      border-color: #08b3f2;
+    }
+  }
+
+  &:after {
+    transition: 0.3s transform,
+                0.3s opacity;
+    transform: scale(0.5);
+    opacity: 0;
+    left: -34px;
+    top: ($input-height - 12px) / 2;
+    width: 12px;
+    height: 12px;
+    background-color: #08b3f2;
+
+    input[type='radio']:checked + & {
+      transform: scale(1);
+      opacity: 1;
+    }
+  }
+
+  &-container {
+    margin-bottom: 20px;
+    padding-left: 40px;
+  }
+}
+
+.form-el {
+  margin-bottom: 20px;
+}
+
+.hint {
+  margin-top: 15px;
+  color: #8197a2;
+  line-height: 18px;
+  font-size: 12px;
+}

stub-design/assets/stylesheets/application/footer.scss

@@ -0,0 +1,52 @@
+.footer {
+  @extend %full-width;
+  position: absolute;
+  bottom: 0;
+  height: $footer-height;
+  background-color: #6d2eae;
+
+  @media screen and (max-width: $mobile-width) {
+    height: auto;
+    padding: 20px 10px 0;
+  }
+
+  .container {
+    position: relative;
+
+    @media screen and (max-width: $mobile-width) {
+      padding-top: $footer-height - 20;
+    }
+  }
+
+  &-logo,
+  .socials {
+    transform: translateY(-50%);
+    position: absolute;
+    z-index: 1;
+    top: 50%;
+
+    @media screen and (max-width: $mobile-width) {
+      transform: translateY(0);
+      top: 0;
+    }
+  }
+
+  &-logo {
+    @extend %logos;
+    left: 0;
+    width: 101px;
+  	height: 24px;
+  	background-position: 0 0
+  }
+
+  &-rights {
+    color: #fff;
+    line-height: $footer-height;
+    text-align: center;
+    font-size: 12px;
+
+    @media screen and (max-width: $mobile-width) {
+      line-height: 30px;
+    }
+  }
+}

stub-design/assets/stylesheets/application/header.scss

@@ -0,0 +1,52 @@
+.header {
+  margin-bottom: $desktop-indent;
+  padding: 22px 0;
+  background-color: #6d2eae;
+
+  @media screen and (max-width: $tablet-width) {
+    margin-bottom: $tablet-indent;
+  }
+
+  @media screen and (max-width: $mobile-width) {
+    margin-bottom: $mobile-indent;
+  }
+
+  .container {
+    overflow: hidden;
+  }
+
+  &-logo {
+    @extend %logos;
+    float: left;
+    width: 149px;
+  	height: 35px;
+    background-position: 0 -24px;
+  }
+
+  &-settings,
+  &-new-ballot {
+    @extend %button;
+    @extend %button_icon;
+    float: right;
+    border-radius: 3px;
+    color: #fff;
+    background-size: 12px 12px;
+
+    @media screen and (max-width: $tablet-width) {
+      padding: 0 20px;
+      background-position: center center;
+      font-size: 0;
+    }
+  }
+
+  &-settings {
+    margin-right: 15px;
+    background-color: #7d58bb;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAflBMVEX///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////+yfIzaAAAAKXRSTlMAAgQFBgwNDhAqKyxJSlJTVFVXZGVojo+Q19ja5Obn6+3u7/D19vf8/fmxL7QAAADLSURBVHgBfdHtVoJAGMTxUUwUZCtKRWzpxWj93/8Nti5LxDlbv68DzHkGTXbW7pRiwWpumcnDk5ctFe37y8MUPH58PsXne3D19oB32NYO+uGdxRvgrgRXB7wvFBjHjLtXVM8SV2tU3IKzyXNzvgWFRkeg3cjbtMAx3ktgYh+B38AyyBXcEZO/gk5Vl/rUS/VTfhrKT0CjUemA1qzXpgVcqf8PTEwS+xav6RHj7EWD15S/Ztf+a/ajLv2zomylKdAq05yFTilVF+8NvgGLASpP2eRPbAAAAABJRU5ErkJggg==);
+  }
+
+  &-new-ballot {
+    background-color: #08b3f2;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAMAAADXqc3KAAAAFVBMVEX///////////////////////////9nSIHRAAAABnRSTlMASUrk5udXTd49AAAAOUlEQVR42tXQsQEAIAgDQcAn+4+snRZxAK79KokrIcNBwgYdc0Migwxk8Qsd1TJWDf/KQWobqt+9G4coA99W7as5AAAAAElFTkSuQmCC);
+  }
+}

stub-design/assets/stylesheets/application/info.scss

@@ -0,0 +1,15 @@
+.info {
+  @include image-2x('../images/info@2x.png', 32px, 32px);
+  display: flex;
+  align-items: center;
+  padding-left: 44px;
+  min-height: 32px;
+  background-image: url(../images/info.png);
+  background-repeat: no-repeat;
+  background-position: left center;
+  color: #8197a2;
+
+  .ballots & {
+    margin-bottom: 20px;
+  }
+}

stub-design/assets/stylesheets/application/new.scss

@@ -0,0 +1,24 @@
+.new {
+  &-form {
+    @extend %white-block;
+    overflow: hidden;
+
+    &-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+
+      @media screen and (max-width: $mobile-width) {
+        flex-direction: column;
+      }
+    }
+  }
+
+  .add-ballot {
+    white-space: nowrap;
+
+    @media screen and (max-width: $mobile-width) {
+      margin-top: 20px;
+    }
+  }
+}

stub-design/assets/stylesheets/application/settings.scss

@@ -0,0 +1,12 @@
+.settings {
+  @extend %white-block;
+  max-width: 600px;
+  margin: 0 auto;
+
+  &-title {
+    margin-bottom: 20px;
+    color: #38454f;
+    text-align: center;
+    font-size: 24px;
+  }
+}

stub-design/assets/stylesheets/application/socials.scss

@@ -0,0 +1,76 @@
+.socials {
+  font-size: 0;
+
+  .footer & {
+    right: 0;
+  }
+
+  &-i {
+    transition: 0.3s background-color;
+    position: relative;
+    display: inline-block;
+    vertical-align: top;
+    width: 30px;
+    height: 30px;
+    border-radius: 50%;
+    background-color: fade-out(#fff, 0.8);
+
+    &:not(:first-child) {
+      margin-left: 10px;
+    }
+
+    &:hover {
+      background-color: fade-out(#fff, 0.6);
+    }
+
+    &:before {
+      @include image-2x('../images/socials@2x.png', 16px, 69px);
+      transform: translate(-50%, -50%);
+      content: '';
+      position: absolute;
+      left: 50%;
+      top: 50%;
+      background-image: url(../images/socials.png);
+    }
+
+    &_github {
+      &:before {
+        width: 16px;
+        height: 16px;
+        background-position: 0 0;
+      }
+    }
+
+    &_oracles {
+      &:before {
+        width: 16px;
+        height: 14px;
+        background-position: 0 -16px;
+      }
+    }
+
+    &_reddit {
+      &:before {
+        width: 15px;
+        height: 13px;
+        background-position: 0 -30px;
+      }
+    }
+
+    &_telegram {
+      &:before {
+        width: 16px;
+        height: 14px;
+        background-position: 0 -43px;
+      }
+    }
+
+    &_twitter {
+      &:before {
+        width: 15px;
+        height: 12px;
+        background-position: 0 -57px;
+      }
+    }
+  }
+}

stub-design/assets/stylesheets/application/vote-scale.scss

@@ -0,0 +1,51 @@
+.vote-scale {
+  clear: left;
+  overflow: hidden;
+  height: 6px;
+  margin-top: 30px;
+  border-radius: 3px;
+  background-color: fade-out(#e5eef9, 0.5);
+
+  &--fill {
+    height: 100%;
+    border-radius: 3px;
+
+    &_yes {
+      background-color: #08b3f2;
+    }
+
+    &_no {
+      background-color: #6d2eae;
+    }
+  }
+
+  &--container {
+    width: 100%;
+    max-width: 343px;
+
+    @media screen and (max-width: $tablet-width) {
+      float: right;
+      max-width: 100%;
+    }
+  }
+
+  &--value {
+    float: left;
+    font-size: 12px;
+  }
+
+  &--votes,
+  &--percentage {
+    float: right;
+    font-size: 12px;
+  }
+
+  &--votes {
+    margin-left: 10px;
+    color: #8197a2;
+  }
+
+  &--percentage {
+    color: #08b3f2;
+  }
+}

stub-design/gulpfile.js

@@ -0,0 +1,39 @@
+'use strict';
+
+const gulp = require('gulp');
+const sass = require('gulp-sass');
+const sassGlob = require('gulp-sass-glob');
+const autoprefixer = require('gulp-autoprefixer');
+const uglifycss = require('gulp-uglifycss');
+const include = require('gulp-include');
+const addsrc = require('gulp-add-src');
+const order = require('gulp-order');
+const concat = require('gulp-concat');
+const uglify = require('gulp-uglify');
+
+gulp.task('sass', function() {
+  return gulp.src(['assets/stylesheets/*.scss'])
+    .pipe(sassGlob())
+    .pipe(sass().on('error', sass.logError))
+    .pipe(autoprefixer())
+    .pipe(uglifycss())
+    .pipe(gulp.dest('assets/stylesheets/'));
+});
+
+gulp.task('javascript', function() {
+  return gulp.src('assets/javascripts/application/*.js')
+    .pipe(addsrc('assets/javascripts/vendor/index.js'))
+    .pipe(order([
+      "assets/javascripts/vendor/index.js",
+      "assets/javascripts/application/*.js"
+    ], {base: '.'}))
+    .pipe(include())
+    .pipe(concat('application.js'))
+    // .pipe(uglify())
+    .pipe(gulp.dest('assets/javascripts'));
+});
+
+gulp.task('watch', function() {
+  gulp.watch('assets/stylesheets/**/*.scss', ['sass']);
+  gulp.watch('assets/javascripts/application/*.js', ['javascript']);
+});

stub-design/index.html

@@ -0,0 +1,106 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title></title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./assets/stylesheets/application.css">
+</head>
+<body>
+  <header class="header">
+    <div class="container">
+      <a href="#" class="header-logo"></a>
+      <a href="#" class="header-new-ballot">New ballot</a>
+      <a href="#" class="header-settings">Settings</a>
+    </div>
+  </header>
+  <section class="container ballots">
+    <h1 class="title">Ballots</h1>
+    <div class="ballots-i">
+      <div class="ballots-about">
+        <div class="ballots-about-i ballots-about-i_name">
+          <div class="ballots-about-td">
+            <p class="ballots-about-i--title">Name</p>
+          </div>
+          <div class="ballots-about-td">
+            <p class="ballots-i--name">Suleyman Duyar</p>
+            <p class="ballots-i--created">31/10/2017 7:22 AM</p>
+          </div>
+        </div>
+        <div class="ballots-about-i ballots-about-i_proposal">
+          <div class="ballots-about-td">
+            <p class="ballots-about-i--title">Proposal</p>
+          </div>
+          <div class="ballots-about-td">
+            <p>Remove notary Shawn Grey, Vermont ID: 55512345 ...</p>
+            <a href="#" class="ballots-i--see-all-proposal">See All</a>
+          </div>
+        </div>
+        <div class="ballots-about-i ballots-about-i_mining-key">
+          <div class="ballots-about-td">
+            <p class="ballots-about-i--title">Mining key</p>
+          </div>
+          <div class="ballots-about-td">
+            <p>0xA1Cf735Ab55e9840Be820261D9b404959fcB5e41</p>
+          </div>
+        </div>
+        <div class="ballots-about-i ballots-about-i_time">
+          <div class="ballots-about-td">
+            <p class="ballots-about-i--title">Time</p>
+          </div>
+          <div class="ballots-about-td">
+            <p class="ballots-i--time">17:49</p>
+            <p class="ballots-i--to-close">To close</p>
+          </div>
+        </div>
+      </div>
+      <div class="ballots-i-scale">
+        <div class="ballots-i-scale-column">
+          <a href="#" class="ballots-i--vote ballots-i--vote_yes">Vote</a>
+          <div class="vote-scale--container">
+            <p class="vote-scale--value">Yes</p>
+            <p class="vote-scale--votes">Votes: 40</p>
+            <p class="vote-scale--percentage">40%</p>
+            <div class="vote-scale">
+              <div class="vote-scale--fill vote-scale--fill_yes" style="width: 50%"></div>
+            </div>
+          </div>
+        </div>
+        <div class="ballots-i-scale-column">
+          <div class="vote-scale--container">
+            <p class="vote-scale--value">No</p>
+            <p class="vote-scale--votes">Votes: 10</p>
+            <p class="vote-scale--percentage">20%</p>
+            <div class="vote-scale">
+              <div class="vote-scale--fill vote-scale--fill_no" style="width: 30%"></div>
+            </div>
+          </div>
+          <a href="#" class="ballots-i--vote ballots-i--vote_no">Vote</a>
+        </div>
+      </div>
+      <div class="info">
+        Minimum 3 from 12 validators  required to pass the proposal
+      </div>
+      <hr>
+      <div class="ballots-footer">
+        <a href="#" class="ballots-footer-finalize">Finalize ballot</a>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore</p>
+      </div>
+    </div>
+  </section>
+  <footer class="footer">
+    <div class="container">
+      <p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
+      <a href="#" class="footer-logo"></a>
+      <div class="socials">
+        <a href="#" class="socials-i socials-i_reddit"></a>
+        <a href="#" class="socials-i socials-i_twitter"></a>
+        <a href="#" class="socials-i socials-i_oracles"></a>
+        <a href="#" class="socials-i socials-i_telegram"></a>
+        <a href="#" class="socials-i socials-i_github"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>

stub-design/new.html

@@ -0,0 +1,191 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title></title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./assets/stylesheets/application.css">
+</head>
+<body>
+  <header class="header">
+    <div class="container">
+      <a href="#" class="header-logo"></a>
+      <a href="#" class="header-new-ballot">New ballot</a>
+      <a href="#" class="header-settings">Settings</a>
+    </div>
+  </header>
+  <section class="container new">
+    <h1 class="title">New Ballot</h1>
+    <form action="" class="new-form">
+      <div class="hidden">
+        <div class="left">
+          <div class="radio-container">
+            <input type="radio" name="ballot-type" id="ballot-for-validators" checked>
+            <label for="ballot-for-validators" class="radio">Ballot for validators</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="radio-container">
+            <input type="radio" name="ballot-type" id="ballot-for-consensus">
+            <label for="ballot-for-consensus" class="radio">Ballot for consensus</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore
+            </p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="hidden">
+        <div class="left">
+          <div class="form-el">
+            <label for="full-name">Full Name</label>
+            <input type="text" id="full-name">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="form-el">
+            <label for="address">Address</label>
+            <input type="text" id="address">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="left">
+          <div class="form-el">
+            <label for="state">State</label>
+            <select id="state">
+              <option value=""></option>
+              <option value="">Alabama</option>
+              <option value="">Florida</option>
+              <option value="">New York</option>
+              <option value="">Washington</option>
+            </select>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="form-el">
+            <label for="zip-code">Zip Code</label>
+            <input type="text" id="zip-code">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="left">
+          <div class="form-el">
+            <label for="license-id">License ID</label>
+            <input type="text" id="license-id">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="form-el">
+            <label for="license-expiration">License Expiration</label>
+            <input type="text" id="license-expiration">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="hidden">
+        <div class="left">
+          <div class="radio-container">
+            <input type="radio" name="key-control" id="add-key" checked>
+            <label for="add-key" class="radio radio_icon radio_add">Add key</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+          <div class="radio-container">
+            <input type="radio" name="key-control" id="remove-key">
+            <label for="remove-key" class="radio radio_icon radio_remove">Remove key</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="radio-container">
+            <input type="radio" name="keys" id="mining-key" checked>
+            <label for="mining-key" class="radio">Mining Key</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+          <div class="radio-container">
+            <input type="radio" name="keys" id="payout-key">
+            <label for="payout-key" class="radio">Payout Key</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+          <div class="radio-container">
+            <input type="radio" name="keys" id="voting-key">
+            <label for="voting-key" class="radio">Voting Key</label>
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="hidden">
+        <div class="left">
+          <div class="form-el">
+            <label for="memo">Memo</label>
+            <input type="text" id="memo">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+        <div class="right">
+          <div class="form-el">
+            <label for="key">Key</label>
+            <input type="text" id="key">
+            <p class="hint">
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+            </p>
+          </div>
+        </div>
+      </div>
+      <hr>
+      <div class="new-form-footer">
+        <div class="info">
+          Minimum 3 from 12 validators  required to pass the proposal
+        </div>
+        <button type="button" class="add-ballot">Add ballot</button>
+      </div>
+    </form>
+  </section>
+  <footer class="footer">
+    <div class="container">
+      <p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
+      <a href="#" class="footer-logo"></a>
+      <div class="socials">
+        <a href="#" class="socials-i socials-i_reddit"></a>
+        <a href="#" class="socials-i socials-i_twitter"></a>
+        <a href="#" class="socials-i socials-i_oracles"></a>
+        <a href="#" class="socials-i socials-i_telegram"></a>
+        <a href="#" class="socials-i socials-i_github"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>

stub-design/settings.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <title></title>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="./assets/stylesheets/application.css">
+</head>
+<body>
+  <header class="header">
+    <div class="container">
+      <a href="#" class="header-logo"></a>
+      <a href="#" class="header-new-ballot">New ballot</a>
+      <a href="#" class="header-settings">Settings</a>
+    </div>
+  </header>
+  <section class="container">
+    <div class="settings">
+      <p class="settings-title">Select Voting Key</p>
+      <div class="form-el">
+        <select id="state">
+          <option value="" default>Al12s23d34d3d3dd3dq3234frvrt5</option>
+        </select>
+        <div class="hint">
+          Please select your voting key from the list. You will be able to change it later in Settings menu.
+        </div>
+      </div>
+      <div class="center">
+        <button type="button">Continue</button>
+      </div>
+    </div>
+  </section>
+  <footer class="footer">
+    <div class="container">
+      <p class="footer-rights">2017 Oracles Network. All rights reserved.</p>
+      <a href="#" class="footer-logo"></a>
+      <div class="socials">
+        <a href="#" class="socials-i socials-i_reddit"></a>
+        <a href="#" class="socials-i socials-i_twitter"></a>
+        <a href="#" class="socials-i socials-i_oracles"></a>
+        <a href="#" class="socials-i socials-i_telegram"></a>
+        <a href="#" class="socials-i socials-i_github"></a>
+      </div>
+    </div>
+  </footer>
+</body>
+</html>