add design

countdown.js

@@ -0,0 +1,11 @@
+var countdown = $("#countdown").countdown360({
+  radius: 30,
+  seconds: 30,
+  fontColor: '#000',
+  autostart: false,
+  onComplete: function() {
+      console.log('done')
+  }
+});
+countdown.start();
+console.log('countdown360 ', countdown);

jquery.countdown.js

@@ -0,0 +1,166 @@
+;(function ($, window, document, undefined) {
+  var pluginName = "countdown360",
+    defaults = {
+      radius: 15.5,                    // radius of arc
+      strokeStyle: "#9990F0",          // the color of the stroke
+      strokeWidth: 2,                  // the stroke width, dynamically calulated if omitted in options
+      fillStyle: "#FFFFFF",            // the fill color
+      fontColor: "#477050",            // the font color
+      fontFamily: "Helvetica Neue",    // the font family
+      fontSize: 28,                    // the font size, dynamically calulated if omitted in options
+      fontWeight: 100,                 // the font weight
+      autostart: true,                 // start the countdown automatically
+      seconds: 30,                     // the number of seconds to count down
+      label: ["second", "seconds"],    // the label to use or false if none
+      startOverAfterAdding: true,      // Start the timer over after time is added with addSeconds
+      onComplete: function () {}
+    };
+
+  function Plugin(element, options) {
+    this.element = element;
+    this.settings = $.extend({}, defaults, options);
+    if (!this.settings.fontSize) { this.settings.fontSize = this.settings.radius/1.2; }
+    if (!this.settings.strokeWidth) { this.settings.strokeWidth = this.settings.radius/4; }
+    this._defaults = defaults;
+    this._name = pluginName;
+    this._init();
+  }
+
+  Plugin.prototype = {
+    getTimeRemaining: function()
+    {
+    
+      var timeRemaining = this._secondsLeft(this.getElapsedTime());
+      return  timeRemaining;
+    },
+    getElapsedTime: function()
+    {
+      return  Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
+    },
+    extendTimer: function (value) {
+      var seconds = parseInt(value),
+          secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
+      if ((this._secondsLeft(secondsElapsed) + seconds) <= this.settings.seconds) {
+        this.startedAt.setSeconds(this.startedAt.getSeconds() + parseInt(value));
+      }
+    },
+
+    addSeconds: function (value) {
+      var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000);
+      if (this.settings.startOverAfterAdding) {
+          this.settings.seconds = this._secondsLeft(secondsElapsed) + parseInt(value);
+          this.start();
+        } else {
+          this.settings.seconds += parseInt(value);
+        }
+    },
+
+    start: function () {
+      this.startedAt = new Date();
+      this._drawCountdownShape(Math.PI*3.5, true);
+      this._drawCountdownLabel(0);
+      this.interval = setInterval(jQuery.proxy(this._draw, this), 1000);
+    },
+
+    stop: function (cb) {
+      clearInterval(this.interval);
+      if (cb) { cb(); }
+    },
+
+    _init: function () {
+      this.settings.width = (this.settings.radius * 2) + (this.settings.strokeWidth * 2);
+      this.settings.height = this.settings.width;
+      this.settings.arcX = this.settings.radius + this.settings.strokeWidth;
+      this.settings.arcY = this.settings.arcX;
+      this._initPen(this._getCanvas());
+      if (this.settings.autostart) { this.start(); }
+    },
+
+    _getCanvas: function () {
+      var $canvas = $("<canvas id=\"countdown360_" + $(this.element).attr("id") + "\" width=\"" +
+                      this.settings.width + "\" height=\"" +
+                      this.settings.height + "\">" +
+                      "<span id=\"countdown-text\" role=\"status\" aria-live=\"assertive\"></span></canvas>");
+      $(this.element).prepend($canvas[0]);
+      return $canvas[0];
+    },
+
+    _initPen: function (canvas) {
+      this.pen              = canvas.getContext("2d");
+      this.pen.lineWidth    = this.settings.strokeWidth;
+      this.pen.strokeStyle  = this.settings.strokeStyle;
+      this.pen.fillStyle    = this.settings.fillStyle;
+      this.pen.textAlign    = "center";
+      this.pen.textBaseline = "middle";
+      this.ariaText = $(canvas).children("#countdown-text");
+      this._clearRect();
+    },
+
+    _clearRect: function () {
+      this.pen.clearRect(0, 0, this.settings.width, this.settings.height);
+    },
+
+    _secondsLeft: function(secondsElapsed) {
+      return this.settings.seconds - secondsElapsed;
+    },
+
+    _drawCountdownLabel: function (secondsElapsed) {
+      this.ariaText.text(secondsLeft);
+      this.pen.font         = this.settings.fontWeight + " " + this.settings.fontSize + "px " + this.settings.fontFamily;
+      var secondsLeft = this._secondsLeft(secondsElapsed),
+          label = secondsLeft === 1 ? this.settings.label[0] : this.settings.label[1],
+          drawLabel = this.settings.label && this.settings.label.length === 2,
+          x = this.settings.width/2;
+      if (drawLabel) {
+        y = this.settings.height/2 - (this.settings.fontSize/6.2);
+      } else {
+        y = this.settings.height/2;
+      }
+      this.pen.fillStyle = this.settings.fillStyle;
+      this.pen.fillText(secondsLeft + 1, x, y);
+      this.pen.fillStyle  = this.settings.fontColor;
+      this.pen.fillText(secondsLeft, x, y);
+      if (drawLabel) {
+        this.pen.font = "normal small-caps " + (this.settings.fontSize/3) + "px " + this.settings.fontFamily;
+        this.pen.fillText(label, this.settings.width/2, this.settings.height/2 + (this.settings.fontSize/2.2));
+      }
+    },
+
+    _drawCountdownShape: function (endAngle, drawStroke) {
+      this.pen.fillStyle = this.settings.fillStyle;
+      this.pen.beginPath();
+      this.pen.arc(this.settings.arcX, this.settings.arcY, this.settings.radius, Math.PI*1.5, endAngle, false);
+      this.pen.fill();
+      if (drawStroke) { this.pen.stroke(); }
+    },
+
+    _draw: function () {
+      var secondsElapsed = Math.round((new Date().getTime() - this.startedAt.getTime())/1000),
+          endAngle = (Math.PI*3.5) - (((Math.PI*2)/this.settings.seconds) * secondsElapsed);
+      this._clearRect();
+      this._drawCountdownShape(Math.PI*3.5, false);
+      if (secondsElapsed < this.settings.seconds) {
+        this._drawCountdownShape(endAngle, true);
+        this._drawCountdownLabel(secondsElapsed);
+      } else {
+        this._drawCountdownLabel(this.settings.seconds);
+        this.stop();
+        this.settings.onComplete();
+      }
+    }
+
+  };
+
+  $.fn[pluginName] = function (options) {
+    var plugin;
+    this.each(function() {
+      plugin = $.data(this, "plugin_" + pluginName);
+      if (!plugin) {
+        plugin = new Plugin(this, options);
+        $.data(this, "plugin_" + pluginName, plugin);
+      }
+    });
+    return plugin;
+  };
+
+})(jQuery, window, document);

phone.html

@@ -0,0 +1,11 @@
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="jquery-2.0.0.min.js" type="text/javascript"></script>
+<script src="jquery.countdown.js" type="text/javascript"></script>
+<div class="phone-screen">
+  <div class="logo"></div>
+  <div class="token-issuer uppercase">your token is:</div>
+  <div class="token-phone"> 123 456 </div>
+  <div id="countdown" class="countdown"></div>
+  <script src="countdown.js" type="text/javascript"></script>
+  <div class="account-name">john@example.com</div> 
+</div>

style.css

@@ -0,0 +1,205 @@
+.col-xs-6 {
+    text-align: center;
+}
+
+.authenticator {
+    z-index: 2;
+    font-size: 32px;
+    line-height: 1.0556;
+    font-weight: 100;
+    letter-spacing: .023em;
+    text-align: center;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.left {
+    margin-top: 18%;
+    padding: 0 0 0 15%;
+}
+
+.qrcode {
+    z-index: 2;
+}
+
+.scan {
+    z-index: 2;
+    font-size: 13px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.verify {
+    z-index: 2;
+    font-size: 13px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+    margin-top: 20px;
+}
+
+.token-label {
+	font-size: 14px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    text-align: center;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+    margin-left: -100px;
+}
+
+input {
+	margin: 10px 10px 5px 0;
+    width: 165px;
+    padding: 5px 20px;
+    border-radius: 10px;
+    font-size: 16px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.btn {
+	background: -webkit-linear-gradient(#6D99ED, #7464ED);
+    color: white;
+    border-radius: 5px;
+    font-size: 18px;
+    border: none;
+    padding: 5px 20px;
+    vertical-align: inherit;
+}
+
+.btn:hover {
+    color: #fff;
+}
+
+.right {
+    margin-top:25%;
+    position: relative;
+}
+
+.iPhone {
+	max-width: 400px;
+    position: absolute;
+    top: -250px;
+    left: 17%;
+}
+
+.iframe {
+	width: 265px;
+    height: 450px;
+    border: none !important;
+    z-index: 2;
+}
+
+.logo {
+    background-image: url("daplie-logo.png");
+    background-repeat: no-repeat;
+    background-size: 200px 50px;
+    width: 200px;
+    height: 50px;
+    margin: 50px auto 0 auto;
+    line-height: 1.0556;
+    text-align: center;
+    z-index: 2;
+}
+
+.uppercase {
+	text-transform: uppercase;
+}
+
+.token-issuer {
+    margin-top: 50px;
+    z-index: 2;
+    font-size: 12px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    text-align: center;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.account-name {
+    margin-top: 80px;
+    z-index: 2;
+    font-size: 18px;
+    line-height: 1.0556;
+    font-weight: 200;
+    letter-spacing: .023em;
+    text-align: center;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+    margin-bottom: 10px;
+}
+
+.token-phone {
+    margin-top: 20px;
+    z-index: 2;
+    font-size: 48px;
+    line-height: 1.0556;
+    font-weight: 100;
+    letter-spacing: .043em;
+    text-align: center;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+.countdown {
+    text-align: center;
+    margin-top: 40px;
+}
+
+.bottom {
+    margin-top: 220px;
+}
+
+.wide {
+    width: 340px;
+}
+
+.console {
+    z-index: 2;
+    text-align: center;
+    font-size: 32px;
+    line-height: 1.0556;
+    font-weight: 100;
+    letter-spacing: .023em;
+    font-style: normal;
+    font-family: "Myriad Set Pro","Helvetica Neue","Helvetica","Arial",sans-serif;
+}
+
+hr {
+    border: 0;
+    height: 1px;
+    background: #333;
+    background-image: linear-gradient(to right, #ccc, #333, #ccc);
+}
+
+.iframe-container {
+    max-width: 400px;
+    position: absolute;
+    top: -120px;
+    left: 17%;
+    width: 400px;
+    height: 600px;
+}
+
+.fade {
+  opacity: 0;
+}
+
+.in {
+  opacity: 1;
+  transition: opacity .5s ease-in-out;
+  -moz-transition: opacity .5s ease-in-out;
+  -webkit-transition: opacity .5s ease-in-out;
+}

test.html

@@ -1,42 +1,78 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>BOTP Test</title>
+    <title>Authenticator - Daplie, Inc</title>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
+    <meta name="viewport" content="width=device-width, user-scalable=no" />
+    <link rel="stylesheet" type="text/css" href="bootstrap-v3.3.5.min.css">
+    <link rel="stylesheet" type="text/css" href="style.css">
   </head>
-  <body>
-    <h1>Authenticator Test</h1>
+  <body class="fade">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-xs-6 left">
+          <h1 class="authenticator">Authenticator Test</h1>
+          <img alt="qrcode" class="js-qrcode qrcode" width="166" height="166" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
+          <div class="scan">
+            Scan with <a href="https://www.authy.com/personal/mobile/" target="_blank">Authy App</a>
+          </div>
+          <div class="verify">
+            <label class="token-label">Enter Verification Token:</label>
+            <br />
+            <input class="js-token token-input" type="text" placeholder="i.e.  123 456" />
+            <button class="js-verify btn">Verify</button>
+          </div>
+        </div>
 
-    <div>
-      Test with the <a href="https://www.authy.com/personal/mobile/" target="_blank">Authy App</a>.
+        <div class="col-xs-6 right">
+          <div class="iframe-container">
+            <iframe class="iframe" src="phone.html"></iframe>
+          </div>
+            <img class="iPhone" src="iPhoneMockup.png" />
+        </div>
+      </div>
     </div>
 
-    <br />
-    <div>
-      <img alt="qrcode" class="js-qrcode" width="166" height="166" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />
-      <p>20-byte (160-bit) Base32 Key:</p>
-      <h3 class="js-key">xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx</h3>
-      <p class="js-otpauth">otpauth://totp/company:user?secret=xxxx</p>
-    </div>
-
-    <br />
-    <div>
-      <label>Company Name:</label>
-      <input class="js-company-name" type="text" placeholder="Company Name" />
-
-      <label>User Account:</label>
-      <input class="js-user-account" type="text" placeholder="User Account" />
-
-      <button class="js-generate">Regenerate</button>
-    </div>
-
-    <br />
-    <div>
-      <label>Verification Token:</label>
-      <input class="js-token" type="text" placeholder="ex: 000 000" />
-
-      <button class="js-verify">Verify</button>
+    <div class="container">
+      <div class="row">
+        <div class="col-md-3"></div>
+        <div class="col-md-6 bottom">
+          <form class="form-horizontal">
+            <h1 class="console"> Console </h1>
+            <hr />
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Issuer:</label>
+              <div class="col-sm-9">
+                <input type="text" class="js-company-name issuer-input wide" placeholder="Company Name">
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Account:</label>
+              <div class="col-sm-9">
+                <input type="text" class="js-user-account issuer-input wide" placeholder="User Account">
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">Key:</label>
+              <div class="col-sm-9">
+                <input type="text" class="js-key base-key-input wide" value="xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx">
+              </div>
+            </div>
+            <div class="form-group">
+              <div class="col-sm-offset-6 col-xs-6">
+                <button type="button" class="btn btn-default js-generate regenerate">Regenerate</button>
+              </div>
+            </div>
+            <div class="form-group">
+              <label class="col-sm-3 control-label">URL:</label>
+              <div class="col-sm-9">
+                <p class="js-otpauth">otpauth://totp/company:user?secret=xxxx</p>
+              </div>
+            </div>
+          </form>
+        </div>
+        <div class="col-md-3"></div>
+      </div>
     </div>
 
     <!-- extremely lightweight shim for hex conversion -->

test.js

@@ -1,6 +1,12 @@
 // forgive the suckiness, but whatever
 (function (exports) {
-'use strict';
+  'use strict';
+
+  window.addEventListener("load", function () {
+
+    window.document.body.className += " in";
+
+  });
 
 var key;
 var Authenticator = exports.Authenticator;