Fire JS Bin - appetize

You can jump to the latest bin by adding /latest to your URL

Find

⟲

Replace

"use strict";

this.appetizer && this.appetizer.disconnect(), this.appetizer = io.connect(a.path, {
            query: "sessionToken=" + a.sessionToken,
            multiplex: !1
          }), this.connectionString = a.path, this.connectionToken = a.sessionToken, "watch" == this.type && "watch" != b.devices[0].type && b.devices[0].appetizer ? this.connectWatch(b.devices[0].connectionString, b.devices[0].connectionToken) : b.devices[1] && "watch" != this.type && "watch" == b.devices[1].type && b.devices[1].appetizer && b.devices[1].connectWatch(this.connectionString, this.connectionToken), this.appetizer.on("userError", function(a) {
            "true" == c.xdocMsg && window.parent.postMessage("userError", "*"), a.requiresArm ? (e.updateDevice(d.androidDefaultNoX86), toastr.warning('APK has native code but does not have x86 architecture. Switching device type to physical Nexus 5, aka "hammerhead". Please try again.')) : toastr.error(a.message ? a.message : "There was an error loading your app"), e.cleanConnection(), b.recordEvent("user_error_on_requested_session"), b.$apply(function() {})
          }), this.appetizer.on("warning", function() {
            "true" == c.xdocMsg && window.parent.postMessage("timeoutWarning", "*"), toastr.warning("Session will timeout in 10 seconds")
          }), this.appetizer.on("userInteractionReceived", function() {
            toastr.remove()
          }), this.appetizer.on("debug", function(a) {
            "true" == c.xdocMsg && window.parent.postMessage({
              type: "debug",
              message: a.message
            }, "*"), e.debugConsole += a.message, b.$apply(function() {})
          }), this.appetizer.on("appLaunch", function() {
            e.appLaunch = !0, e.showPostSession = !0, "true" == c.xdocMsg && window.parent.postMessage("appLaunch", "*"), b.$apply(function() {})
          }), this.appetizer.on("endSession", function() {
            e.endSession()
          }), this.appetizer.on("setRotation", function(a) {
            e.setRotation(a.rotation), b.$apply(function() {})
          }), this.appetizer.on("frameData", function(a) {
            e.appetizer && e.appetizer.emit("frameReceived", {
              hash: a.hash
            }), e.firstFrameReceived || ("true" == c.xdocMsg && window.parent.postMessage("firstFrameReceived", "*"), e.firstFrameReceived = !0, b.$apply(function() {})), m = a.buffer;
            var d = document.getElementById(e.canvasId);
            if(d) {
              var f = d.getContext("2d"),
                g = new Uint8Array(a.buffer),
                h = uint8ArrayToString(g),
                j = btoa(h),
                k = new Image;
              k.onload = function() {
                var a = 0,
                  b = 0;
                f.clearRect(0, 0, 2e3, 2e3), f.drawImage(this, a, b)
              }, k.src = "data:image/jpeg;base64," + j, e.physical || setTimeout(function() {
                k.width > k.height && "portrait" == e.orientation ? (e.rotation += i, i = 0, e.rotation %= 360, e.orientation = "landscape", e.rotation % 180 != 90 && (e.rotation = 270), e.rotateDisabled = !1, e.updateScaledWidthsAndHeights(), b.$apply(function() {})) : k.height > k.width && "landscape" == e.orientation && (e.rotation += i, i = 0, e.rotation %= 360, e.orientation = "portrait", e.rotation % 180 != 0 && (e.rotation = 0), e.rotateDisabled = !1, e.updateScaledWidthsAndHeights(), b.$apply(function() {}))
              }, 20);
              console.image(k.src);
            }
          }), "watch" != e.type && ($(document).off("keypress").keypress(function(a) {
            a.preventDefault()
          }), $(document).off("keydown").keydown(function(a) {
            var b, c;
            switch(a.which) {
            case 17:
            case 18:
            case 91:
            case 93:
            case 27:
            case 112:
            case 113:
            case 114:
            case 115:
            case 116:
            case 117:
            case 118:
            case 119:
            case 120:
            case 121:
            case 122:
            case 123:
              return;
            case 8:
            case 9:
            case 32:
              c = !0, b = String.fromCharCode(a.which);
              break;
            case 37:
              c = !0, b = "leftArrow";
              break;
            case 38:
              c = !0, b = "upArrow";
              break;
            case 39:
              c = !0, b = "rightArrow";
              break;
            case 40:
              c = !0, b = "downArrow";
              break;
            case 186:
              b = ";";
              break;
            case 187:
              b = "=";
              break;
            case 188:
              b = ",";
              break;
            case 189:
              b = "-";
              break;
            case 190:
              b = ".";
              break;
            case 191:
              b = "/";
              break;
            case 192:
              b = "`";
              break;
            case 219:
              b = "[";
              break;
            case 220:
              b = "\\";
              break;
            case 221:
              b = "]";
              break;
            case 222:
              b = "'";
              break;
            default:
              b = String.fromCharCode(a.which)
            }
            b && (c && a.preventDefault(), e.appetizer.emit("userInteraction", {
              type: "keypress",
              which: a.which,
              shiftKey: a.shiftKey + "",
              key: b,
              timeStamp: a.timeStamp
            }), e.sendHeartbeatsToOtherDevices())
          }));
          var f = 0,
            g = 10,
            h = 0,
            j = 0;
          $(document).mousedown(function(a) {
            if(a.target.id != e.canvasId) {
              if(b.devices && b.devices.length > 1) for(var c = 0; c < b.devices.length; c++) if(a.target.id == b.devices[c].canvasId) return;
              $(document).off("mouseup").mouseup(function() {})
            }
          }), $("#" + e.canvasId).off("mousedown").mousedown(function(a) {
            var b = a.offsetX || 100 / e.scale * (a.clientX - $(a.target).offset().left + window.pageXOffset),
              c = a.offsetY || 100 / e.scale * (a.clientY - $(a.target).offset().top + window.pageYOffset);
            e.emitUserInteraction({
              type: a.type,
              which: a.which,
              timeStamp: a.timeStamp,
              xPos: b,
              yPos: c
            }), e.sendHeartbeatsToOtherDevices(), $(document).off("mousemove").mousemove(function(a) {
              a.preventDefault();
              var b = Date.now();
              if(b > f + g) {
                f = b;
                var c = a.offsetX || 100 / e.scale * (a.clientX - $(a.target).offset().left + window.pageXOffset),
                  d = a.offsetY || 100 / e.scale * (a.clientY - $(a.target).offset().top + window.pageYOffset);
                a.target.id == e.canvasId && c >= 0 && c <= $(".canvas-inner-container." + e.canvasId).width() && d >= 0 && d <= $(".canvas-inner-container." + e.canvasId).height() && (h = c, j = d, e.emitUserInteraction({
                  type: a.type,
                  which: a.which,
                  timeStamp: a.timeStamp,
                  xPos: c,
                  yPos: d
                }))
              }
            }), $(document).off("mouseup").mouseup(function(a) {
              $(document).off("mousemove");
              var b = a.offsetX || 100 / e.scale * (a.clientX - $(a.target).offset().left + window.pageXOffset),
                c = a.offsetY || 100 / e.scale * (a.clientY - $(a.target).offset().top + window.pageYOffset);
              e.emitUserInteraction(a.target.id == e.canvasId && b >= 0 && b <= $(".canvas-inner-container." + e.canvasId).width() && c >= 0 && c <= $(".canvas-inner-container." + e.canvasId).height() ? {
                appetizerID: e.appetizerID,
                type: a.type,
                which: a.which,
                timeStamp: a.timeStamp,
                xPos: b,
                yPos: c
              } : {
                appetizerID: e.appetizerID,
                type: a.type,
                which: a.which,
                timeStamp: a.timeStamp,
                xPos: h,
                yPos: j
              }), e.sendHeartbeatsToOtherDevices()
            })
          }), $(document).on("touchstart", function(a) {
            if(a.target.id != e.canvasId) {
              if(b.devices && b.devices.length > 1) for(var c = 0; c < b.devices.length; c++) if(a.target.id == b.devices[c].canvasId) return;
              $(document).off("touchend").on("touchend", function() {})
            }
          }), $("#" + e.canvasId).off("touchstart").on("touchstart", function(a) {
            $("#" + e.canvasId).off("mousedown");
            var b = a.originalEvent.changedTouches[0],
              c = $("#" + e.canvasId).offset(),
              d = 100 / e.scale * (b.pageX - c.left),
              i = 100 / e.scale * (b.pageY - c.top);
            e.emitUserInteraction({
              type: "mousedown",
              which: a.which,
              timeStamp: a.timeStamp,
              xPos: d,
              yPos: i
            }), e.sendHeartbeatsToOtherDevices(), $(document).off("touchmove").on("touchmove", function(a) {
              a.preventDefault();
              var b = Date.now();
              if(b > f + g) {
                f = b;
                var c = a.originalEvent.changedTouches[0],
                  d = $("#" + e.canvasId).offset(),
                  i = 100 / e.scale * (c.pageX - d.left),
                  k = 100 / e.scale * (c.pageY - d.top);
                a.target.id == e.canvasId && i >= 0 && i <= $(".canvas-inner-container." + e.canvasId).width() && k >= 0 && k <= $(".canvas-inner-container." + e.canvasId).height() && (h = i, j = k, e.emitUserInteraction({
                  type: "mousemove",
                  which: a.which,
                  timeStamp: a.timeStamp,
                  xPos: i,
                  yPos: k
                }))
              }
            }), $(document).off("touchend").on("touchend", function(a) {
              $(document).off("touchmove");
              var b = a.originalEvent.changedTouches[0],
                c = $("#" + e.canvasId).offset(),
                d = 100 / e.scale * (b.pageX - c.left),
                f = 100 / e.scale * (b.pageY - c.top);
              e.emitUserInteraction(a.target.id == e.canvasId && d >= 0 && d <= $(".canvas-inner-container." + e.canvasId).width() && f >= 0 && f <= $(".canvas-inner-container." + e.canvasId).height() ? {
                appetizerID: e.appetizerID,
                type: "mouseup",
                which: a.which,
                timeStamp: a.timeStamp,
                xPos: d,
                yPos: f
              } : {
                appetizerID: e.appetizerID,
                type: "mouseup",
                which: a.which,
                timeStamp: a.timeStamp,
                xPos: h,
                yPos: j
              }), e.sendHeartbeatsToOtherDevices()
            })
          })
        }
      }, this.initialize(e)
    };
  return e
}]), angular.module("appetizeApp").constant("appConstants", {
  deviceDimensions: {
    iphone: {
      width: 365,
      height: 782
    },
    ipad: {
      width: 864,
      height: 1287
    },
    iphone4s: {
      width: 370,
      height: 733
    },
    iphone5s: {
      width: 365,
      height: 782
    },
    iphone6: {
      width: 416,
      height: 870
    },
    iphone6plus: {
      width: 690,
      height: 1420
    },
    ipadair: {
      width: 864,
      height: 1287
    },
    iphone6s: {
      width: 416,
      height: 870
    },
    iphone6splus: {
      width: 690,
      height: 1420
    },
    ipadair2: {
      width: 864,
      height: 1287
    },
    nexus5: {
      width: 400,
      height: 795
    },
    nexus7: {
      width: 728,
      height: 1268
    },
    nexus9: {
      width: 866,
      height: 1288
    },
    wearsquare: {
      width: 336,
      height: 688
    },
    wearround: {
      width: 359,
      height: 550
    },
    hammerhead: {
      width: 600,
      height: 1193
    },
    flo: {
      width: 728,
      height: 1268
    },
    ruby: {
      width: 655,
      height: 1292
    },
    hercules: {
      width: 585,
      height: 1064
    }
  },
  screenDimensions: {
    iphone: {
      width: 320,
      height: 568
    },
    ipad: {
      width: 768,
      height: 1024
    },
    iphone4s: {
      width: 320,
      height: 480
    },
    iphone5s: {
      width: 320,
      height: 568
    },
    iphone6: {
      width: 375,
      height: 668
    },
    iphone6plus: {
      width: 621,
      height: 1104
    },
    ipadair: {
      width: 768,
      height: 1024
    },
    iphone6s: {
      width: 375,
      height: 668
    },
    iphone6splus: {
      width: 621,
      height: 1104
    },
    ipadair2: {
      width: 768,
      height: 1024
    },
    nexus5: {
      width: 360,
      height: 640
    },
    nexus7: {
      width: 600,
      height: 960
    },
    nexus9: {
      width: 768,
      height: 1024
    },
    wearsquare: {
      width: 280,
      height: 280
    },
    wearround: {
      width: 320,
      height: 320
    },
    hammerhead: {
      width: 540,
      height: 960
    },
    flo: {
      width: 600,
      height: 960
    },
    ruby: {
      width: 540,
      height: 960
    },
    hercules: {
      width: 480,
      height: 800
    }
  },
  screenPositions: {
    iphone: {
      0: {
        top: 105,
        left: 22
      },
      90: {
        top: 230,
        left: -103
      },
      180: {
        top: 105,
        left: 22
      },
      270: {
        top: 230,
        left: -100
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 150,
          right: -270
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "20px"
        },
        90: {
          width: "50px",
          left: "-188px",
          top: "initial",
          right: "initial",
          bottom: "361px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "20px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-178px",
          bottom: "361px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    ipad: {
      0: {
        top: 130,
        left: 48
      },
      90: {
        top: 262,
        left: -82
      },
      180: {
        top: 130,
        left: 48
      },
      270: {
        top: 262,
        left: -82
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 150,
          right: -270
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "30px"
        },
        90: {
          width: "50px",
          left: "-180px",
          top: "initial",
          right: "initial",
          bottom: "612px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "30px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-170px",
          bottom: "612px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    ipadair: {
      0: {
        top: 130,
        left: 48
      },
      90: {
        top: 262,
        left: -82
      },
      180: {
        top: 130,
        left: 48
      },
      270: {
        top: 262,
        left: -82
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 150,
          right: -270
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "30px"
        },
        90: {
          width: "50px",
          left: "-180px",
          top: "initial",
          right: "initial",
          bottom: "612px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "30px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-170px",
          bottom: "612px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    ipadair2: {
      0: {
        top: 130,
        left: 48
      },
      90: {
        top: 262,
        left: -82
      },
      180: {
        top: 130,
        left: 48
      },
      270: {
        top: 262,
        left: -82
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 150,
          right: -270
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "30px"
        },
        90: {
          width: "50px",
          left: "-180px",
          top: "initial",
          right: "initial",
          bottom: "612px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "30px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-170px",
          bottom: "612px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    iphone4s: {
      0: {
        top: 125,
        left: 25
      },
      90: {
        top: 206,
        left: -53
      },
      180: {
        top: 127,
        left: 25
      },
      270: {
        top: 206,
        left: -57
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 125,
          right: -240
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "35px"
        },
        90: {
          width: "50px",
          left: "-148px",
          top: "initial",
          right: "initial",
          bottom: "337px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "35px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-138px",
          bottom: "337px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    iphone5s: {
      0: {
        top: 105,
        left: 22
      },
      90: {
        top: 230,
        left: -103
      },
      180: {
        top: 105,
        left: 22
      },
      270: {
        top: 230,
        left: -100
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 150,
          right: -270
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "20px"
        },
        90: {
          width: "50px",
          left: "-188px",
          top: "initial",
          right: "initial",
          bottom: "361px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "20px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-178px",
          bottom: "361px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    iphone6: {
      0: {
        top: 100,
        left: 21
      },
      90: {
        top: 247,
        left: -126
      },
      180: {
        top: 100,
        left: 21
      },
      270: {
        top: 247,
        left: -126
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 160,
          right: -290
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "20px"
        },
        90: {
          width: "50px",
          left: "-205px",
          top: "initial",
          right: "initial",
          bottom: "405px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "20px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-195px",
          bottom: "405px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    iphone6plus: {
      0: {
        top: 160,
        left: 35
      },
      90: {
        top: 400,
        left: -205
      },
      180: {
        top: 160,
        left: 33
      },
      270: {
        top: 400,
        left: -208
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 290,
          right: -430
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "35px"
        },
        90: {
          width: "50px",
          left: "-330px",
          top: "initial",
          right: "initial",
          bottom: "665px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "35px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-290px",
          bottom: "665px"
        }
      },
      homeButtonDimensions: {
        width: 90,
        height: 90
      }
    },
    iphone6s: {
      0: {
        top: 100,
        left: 21
      },
      90: {
        top: 247,
        left: -126
      },
      180: {
        top: 100,
        left: 21
      },
      270: {
        top: 247,
        left: -126
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 160,
          right: -290
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "20px"
        },
        90: {
          width: "50px",
          left: "-205px",
          top: "initial",
          right: "initial",
          bottom: "405px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "20px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-195px",
          bottom: "405px"
        }
      },
      homeButtonDimensions: {
        width: 60,
        height: 60
      }
    },
    iphone6splus: {
      0: {
        top: 160,
        left: 35
      },
      90: {
        top: 400,
        left: -205
      },
      180: {
        top: 160,
        left: 33
      },
      270: {
        top: 400,
        left: -208
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 290,
          right: -430
        }
      },
      homeButtonContainer: {
        0: {
          width: "100%",
          left: "initial",
          top: "initial",
          right: "initial",
          bottom: "35px"
        },
        90: {
          width: "50px",
          left: "-330px",
          top: "initial",
          right: "initial",
          bottom: "665px"
        },
        180: {
          width: "100%",
          left: "initial",
          top: "35px",
          right: "initial",
          bottom: "initial"
        },
        270: {
          width: "50px",
          left: "initial",
          top: "initial",
          right: "-290px",
          bottom: "665px"
        }
      },
      homeButtonDimensions: {
        width: 90,
        height: 90
      }
    },
    nexus5: {
      0: {
        top: 67,
        left: 20
      },
      90: {
        top: 217,
        left: -114
      },
      180: {
        top: 77,
        left: 20
      },
      270: {
        top: 217,
        left: -124
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 130,
          right: -250
        }
      }
    },
    nexus7: {
      0: {
        top: 155,
        left: 64
      },
      90: {
        top: 334,
        left: -117
      },
      180: {
        top: 153,
        left: 64
      },
      270: {
        top: 334,
        left: -115
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 205,
          right: -330
        }
      }
    },
    nexus9: {
      0: {
        top: 133,
        left: 49
      },
      90: {
        top: 260,
        left: -80
      },
      180: {
        top: 131,
        left: 49
      },
      270: {
        top: 260,
        left: -78
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 140,
          right: -290
        }
      }
    },
    wearsquare: {
      0: {
        top: 202,
        left: 27
      },
      90: {
        top: 0,
        left: 0
      },
      180: {
        top: 0,
        left: 0
      },
      270: {
        top: 0,
        left: 0
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 130,
          right: -250
        }
      }
    },
    wearround: {
      0: {
        top: 114,
        left: 20
      },
      90: {
        top: 0,
        left: 0
      },
      180: {
        top: 0,
        left: 0
      },
      270: {
        top: 0,
        left: 0
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 130,
          right: -250
        }
      }
    },
    hammerhead: {
      0: {
        top: 100.5,
        left: 30
      },
      90: {
        top: 325.5,
        left: -171
      },
      180: {
        top: 115.5,
        left: 30
      },
      270: {
        top: 325.5,
        left: -186
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -90,
          right: -90
        },
        landscape: {
          bottom: 195,
          right: -375
        }
      }
    },
    flo: {
      0: {
        top: 155,
        left: 64
      },
      90: {
        top: 334,
        left: -117
      },
      180: {
        top: 153,
        left: 64
      },
      270: {
        top: 334,
        left: -115
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 205,
          right: -330
        }
      }
    },
    ruby: {
      0: {
        top: 150,
        left: 56
      },
      90: {
        top: 375,
        left: -138
      },
      180: {
        top: 180,
        left: 58
      },
      270: {
        top: 375,
        left: -172
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 205,
          right: -330
        }
      }
    },
    hercules: {
      0: {
        top: 132,
        left: 53
      },
      90: {
        top: 293,
        left: -108
      },
      180: {
        top: 132,
        left: 52
      },
      270: {
        top: 291,
        left: -108
      },
      rotateButtons: {
        width: 140,
        height: 140,
        portrait: {
          bottom: -60,
          right: -60
        },
        landscape: {
          bottom: 190,
          right: -290
        }
      }
    }
  },
  embedTranslations: {
    iphone: {
      x: 210,
      y: -208
    },
    ipad: {
      x: 212,
      y: -210
    },
    iphone4s: {
      x: 184,
      y: -180
    },
    iphone5s: {
      x: 210,
      y: -208
    },
    iphone6: {
      x: 228,
      y: -226
    },
    iphone6plus: {
      x: 365,
      y: -364
    },
    ipadair: {
      x: 212,
      y: -210
    },
    iphone6s: {
      x: 228,
      y: -226
    },
    iphone6splus: {
      x: 365,
      y: -364
    },
    ipadair2: {
      x: 212,
      y: -210
    },
    nexus5: {
      x: 200,
      y: -196
    },
    nexus7: {
      x: 268,
      y: -272
    },
    nexus9: {
      x: 212,
      y: -210
    },
    wearsquare: {
      x: 0,
      y: 0
    },
    wearround: {
      x: 0,
      y: 0
    },
    hammerhead: {
      x: 300,
      y: -294
    },
    flo: {
      x: 268,
      y: -272
    },
    ruby: {
      x: 268,
      y: -272
    },
    hercules: {
      x: 218,
      y: -260
    }
  },
  iosDevices: ["iphone", "ipad", "iphone4s", "iphone5s", "iphone6", "iphone6plus", "ipadair", "iphone6s", "iphone6splus", "ipadair2"],
  androidDevices: ["nexus5", "nexus7", "nexus9", "hammerhead", "flo", "ruby", "hercules", "wearsquare", "wearround"],
  tabletDevices: ["ipad", "iphone6plus", "ipadair", "iphone6splus", "ipadair2", "nexus7", "nexus9", "hammerhead", "flo", "ruby"],
  physicalDevices: ["hammerhead", "flo", "ruby"],
  watchDevices: ["wearsquare", "wearround"],
  androidNonDefaultDevices: ["nexus7", "nexus9", "hammerhead", "flo", "ruby", "hercules", "wearsquare", "wearround"],
  iosNonDefaultDevices: ["ipad", "iphone4s", "iphone5s", "iphone6", "iphone6plus", "ipadair", "iphone6s", "iphone6splus", "ipadair2"],
  androidDefault: "nexus5",
  androidDefaultNoX86: "hammerhead",
  iosDefault: "iphone5s",
  appGraphics: ["iphone4s", "iphone5s", "iphone6", "iphone6plus", "ipadair", "iphone6s", "iphone6splus", "ipadair2", "nexus5", "nexus7", "nexus9"],
  osCompatibility: {
    ios: {
      8.4: ["iphone", "ipad", "iphone4s", "iphone5s", "iphone6", "iphone6plus", "ipadair"],
      9.1: ["iphone", "ipad", "iphone4s", "iphone5s", "iphone6", "iphone6plus", "ipadair", "iphone6s", "iphone6splus", "ipadair2"]
    },
    android: {
      4.4: ["nexus5", "nexus7", "nexus9"],
      5.1: ["nexus5", "nexus7", "nexus9"],
      "5.1.1": ["hammerhead"],
      "5.0": ["wearround", "wearsquare"],
      "6.0": ["nexus5", "nexus7", "nexus9"]
    }
  },
  osVersionDefaults: {
    nexus5: "5.1",
    nexus7: "5.1",
    nexus9: "5.1",
    hammerhead: "5.1.1",
    wearround: "5.0",
    iphone4s: "9.1",
    iphone5s: "9.1",
    iphone6: "9.1",
    iphone6plus: "9.1",
    ipadair: "9.1",
    iphone6s: "9.1",
    iphone6splus: "9.1",
    ipadair2: "9.1"
  }
}), angular.module("appetizeApp").filter("reverse", function() {
  return function(a) {
    return a.slice().reverse()
  }
});

<!DOCTYPE html>
<html ng-app="appetizeApp" class="no-js">
<head>
	<base href="/">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title ng-bind="pageTitle"></title>
    <meta name="description" content="{{pageDescription}}"/>
    <meta name="author" content="Appetize.io"/>
    <meta name="theme-color" content="#222222"/>
    <meta name="viewport" content="width=device-width"/>
    <meta property="og:site_name" content="Appetize.io" />
    <meta property="og:description" content="Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript." />
    <meta property="og:image" content="https://appetize.io/images/logo1_colored_transparent.png" />
    <meta property="og:title" content="Appetize.io" />
    <meta property="og:type" content="website"/>

<button type="button" class="navbar-toggle" style="margin: 0px;" ng-click="collapsed=!collapsed">
                            <span class="sr-only">Toggle navigation</span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>

</span>
                    <span class="menu-narrow" style="float: right; display: none; clear: both; padding-top: 20px;">
                        <div collapse="!collapsed" >
                             <ul class="mobileNavList" > 
                                <li><a class="btn btn-default" href="/demo">DEMO</a></li>
                                <li><a class="btn btn-default" href="/info">INFO</a></li>
                                <li><a class="btn btn-default" href="/embed">EMBED</a></li>
                                <li><a class="btn btn-default" href="/api">API</a></li>
                                <li><a class="btn btn-default" href="/upload">UPLOAD</a></li>
                            </ul>
                        </div>
                    </span>
                </div>
            </nav>
        </div>

<div class="footer" >
            <a target="_blank" href="https://twitter.com/appetizeio"><i class="fa fa-twitter"></i> Follow Us</a>
            <a href="mailto:hello@appetize.io">Contact Us</a>
        </div>
    </div>

<script>
        $( document ).ready(function(){
            function is_touch_device() {
              return 'ontouchstart' in window // works on most browsers 
                  || 'onmsgesturechange' in window; // works on ie10
            };
            if(is_touch_device()){
                $('body').addClass('touch');
            }
            else{
                $('body').addClass('notouch');
            }

});
        </script>

<script>
        window.prerenderReady = false;
        function setReady(){
            window.prerenderReady = true;
        }
        setTimeout(setReady, 5000);
        </script>

<script>
        window.console = window.console || {};
        window.console.log = window.console.log || function() {};
        </script>

</body>
</html>

@-webkit-keyframes drop {
  0% {
    opacity:0;
    -webkit-transform:translateY(-20px)
  }
  100% {
    opacity:1;
    -webkit-transform:translateY(0px)
  }
}
@-moz-keyframes drop {
  0% {
    opacity:0;
    -moz-transform:translateY(-20px)
  }
  100% {
    opacity:1;
    -moz-transform:translateY(0px)
  }
}
@-o-keyframes drop {
  0% {
    opacity:0;
    -o-transform:translateY(-20px)
  }
  100% {
    opacity:1;
    -o-transform:translateY(0px)
  }
}
@-ms-keyframes drop {
  0% {
    opacity:0;
    -ms-transform:translateY(-20px)
  }
  100% {
    opacity:1;
    -ms-transform:translateY(0px)
  }
}
@keyframes drop {
  0% {
    opacity:0;
    transform:translateY(-20px)
  }
  100% {
    opacity:1;
    transform:translateY(0px)
  }
}
.homepage-icon {
  animation:drop 800ms;
  -webkit-animation:drop 800ms;
  padding-bottom:10px
}
.icon-ios-timer-outline {
  -webkit-animation-delay:100ms;
  animation-delay:100ms;
  opacity:0;
  animation-fill-mode:forwards
}
.icon-ios-browsers-outline {
  -webkit-animation-delay:200ms;
  animation-delay:200ms;
  opacity:0;
  animation-fill-mode:forwards
}
.page-container {
  max-width:960px;
  margin:0 auto;
  padding:20px;
  padding-bottom:80px
}
html {
  background:#262626;
  height:100%
}
html.embed {
  background:0 0
}
.options .btn-group .btn {
  float:none
}
.options .btn-group {
  display:inline-table
}
.paragraph {
  display:block;
  margin-bottom:10px
}
table.financial-credit {
  width:100%
}
table.financial-credit th {
  font-weight:inherit
}
.accounts-icon, .manage-icon {
  width:50px;
  height:50px;
  margin-right:10px
}
.icon {
  border-radius:5px
}
.app-disabled {
  opacity:.5
}
.input-dark {
  background:#333;
  color:#fff;
  word-break:break-all
}
.ul-dark, .ul-dark li, .ul-dark li a {
  background:#333;
  color:#fff;
  font-family:'Courier New', 'Helvetica Neue', sans-serif;
  font-weight:300!important
}
.next-to-button {
  vertical-align:bottom;
  font-size:16px
}
.account {
  text-align:left;
  max-width:800px;
  margin:0 auto
}
.account .title {
  font-size:36px;
  margin-right:10px
}
.account .app-summary-major {
  font-size:16px;
  margin-right:10px
}
.account .app-summary-minor {
  font-size:12px;
  margin-right:10px
}
.account .app-summary {
  padding-bottom:20px
}
.menu-full .btn-default {
  margin-left:10px
}
input {
  max-width:300px
}
.accountsApp form .has-error .form-control {
  border-color:#a94442;
  -webkit-box-shadow:inset 0 0 2px 2px rgba(169, 68, 66, .5);
  box-shadow:inset 0 0 2px 2px rgba(169, 68, 66, .5)
}
.accountsApp form .has-error .form-control:focus {
  border-color:#843534;
  -webkit-box-shadow:inset 0 0 3px 3px rgba(169, 68, 66, .75);
  box-shadow:inset 0 0 3px 3px rgba(169, 68, 66, .75)
}
.width100 {
  width:100%
}
.spin {
  -webkit-animation:spin 1s infinite linear;
  -moz-animation:spin 1s infinite linear;
  -o-animation:spin 1s infinite linear;
  -ms-animation:spin 1s infinite linear;
  animation:spin 1s infinite linear
}
@-moz-keyframes spin {
  0% {
    -moz-transform:rotate(0deg)
  }
  100% {
    -moz-transform:rotate(359deg)
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform:rotate(0deg)
  }
  100% {
    -webkit-transform:rotate(359deg)
  }
}
@-o-keyframes spin {
  0% {
    -o-transform:rotate(0deg)
  }
  100% {
    -o-transform:rotate(359deg)
  }
}
@-ms-keyframes spin {
  0% {
    -ms-transform:rotate(0deg)
  }
  100% {
    -ms-transform:rotate(359deg)
  }
}
@keyframes spin {
  0% {
    transform:rotate(0deg)
  }
  100% {
    transform:rotate(359deg)
  }
}
.canvas-inner-container.wearround {
  border-radius:9999999px
}
.header1 {
  font-family:Roboto, sans-serif;
  font-weight:300;
  line-height:1.5;
  font-size:36px;
  margin-top:20px;
  margin-bottom:10px
}
.btn-info.dark {
  background:#39b3d7;
  border-color:#269abc
}
.btn-info.dark:hover {
  background:#209ABE;
  border-color:#269abc
}
.force-opaque {
  opacity:1!important
}
.muted-link, .muted-link:active, .muted-link:visited {
  color:#5bc0de;
  text-decoration:none!important;
  opacity:.5
}
.muted-link:hover {
  opacity:1!important;
  text-decoration:none!important
}
.regular-link, .regular-link:active, .regular-link:visited {
  color:#5bc0de;
  text-decoration:none!important;
  cursor:pointer
}
.regular-link:hover {
  color:#39b3d7;
  text-decoration:none!important
}
.white-link, .white-link:active, .white-link:visited {
  color:#fff;
  text-decoration:none!important;
  cursor:pointer
}
.white-link:hover {
  color:#39b3d7;
  text-decoration:none!important
}
.white-then-muted-link, .white-then-muted-link:active, .white-then-muted-link:visited {
  color:#fff;
  text-decoration:none!important;
  cursor:pointer
}
.white-then-muted-link:hover {
  color:#ccc;
  text-decoration:none!important
}
h1, h2, h3, h4 {
  line-height:1.5
}
body.embed .error {
  color:#1b1b1b
}
.green {
  color:#56cd89
}
.upload-wrapper {
  max-width:500px;
  margin:0 auto;
  text-align:left
}
.manage-wrapper {
  max-width:550px;
  text-align:left;
  margin:0 auto
}
.manage-wrapper .upload-wrapper {
  max-width:550px
}
.manage-wrapper .upload-generate, .manage-wrapper .upload-step {
  display:none
}
.manage-wrapper div {
  padding-bottom:10px
}
.scroller {
  white-space:pre-line;
  height:150px!important;
  overflow-y:hidden;
  position:relative
}
.hljs {
  background:#1b1b1b!important;
  padding:10px!important
}
.cssEditor {
  padding:10px!important;
  height:100px;
  outline:0;
  resize:vertical;
  font-size:12px;
  background:#1b1b1b;
  color:#fff;
  font-family:courier new, monospace;
  width:100%;
  display:block;
  border:0
}
#placeholderImage {
  background-image:url(/assets/appetize/galaxy.jpg);
  background-size:cover;
  background-repeat:no-repeat;
  background-position:50%;
  width:100%;
  height:100%
}
#lastFrameOpacity {
  height:100%;
  width:100%;
  background:#000;
  opacity:.5;
  position:absolute
}
#buttonContainer {
  letter-spacing:.5px;
  height:75px;
  display:inline-block;
  margin:0 auto!important;
  color:#fff;
  line-height:75px;
  font-family:Raleway, sans-serif;
  max-width:310px!important;
  margin-top:120px!important;
  font-size:22pt;
  position:relative
}
.buttonInner {
  padding:0 40px!important;
  border-radius:999999px
}
.phone #buttonContainer {
  margin-top:120px!important;
  font-size:22pt
}
.phone .landscape #buttonContainer {
  margin-top:80px!important
}
.watch #buttonContainer {
  font-size:18pt;
  margin-top:60px!important
}
.watch.wearround #buttonContainer {
  font-size:16pt;
  margin-top:70px!important
}
.tablet #buttonContainer {
  max-width:700px!important;
  margin-top:220px!important;
  height:100px;
  line-height:100px;
  font-size:28pt
}
.tablet .buttonInner {
  padding:0 70px!important
}
.tablet .landscape #buttonContainer {
  margin-top:180px!important
}
.buttonInnerBackground {
  position:relative;
  color:rgba(0, 0, 0, 0)
}
.buttonInnerText {
  position:absolute;
  top:0
}
body.embed .canvas-inner-container * {
  float:none;
  margin:0 auto;
  display:block;
  text-align:center
}
.branding-container {
  position:absolute;
  bottom:10px;
  width:100%;
  text-align:center;
  padding:20px;
  opacity:.8
}
.branding-container img {
  display:inline-block!important
}
.options {
  padding-top:20px
}
.embed-samples .iframe-options .btn-group {
  padding-right:10px;
  padding-bottom:10px
}
.options .btn-info {
  opacity:.5!important
}
.options .btn-info.active {
  opacity:1!important
}
.branding-logo {
  width:30px
}
.fs64 {
  font-size:64px
}
.cw270 {
  transform:rotate(270deg);
  -webkit-transform:rotate(270deg);
  -moz-transform:rotate(270deg);
  -o-transform:rotate(270deg);
  -ms-transform:rotate(270deg)
}
a.rotate img {
  opacity:.5;
  cursor:pointer
}
a.disabled.rotate:hover img {
  opacity:.5;
  cursor:default
}
a.rotate:hover img {
  opacity:1
}
.canvas-container.tablet .branding {
  font-size:30px!important
}
.canvas-container.tablet .branding-logo {
  width:45px
}
.canvas-container.tablet .queue-info {
  font-size:48px!important
}
.canvas-container.tablet .fs64 {
  font-size:96px!important
}
.canvas-wrapper {
  margin:0 auto
}
#dummy {
  position:absolute;
  left:-999999px
}
code, pre {
  background-color:transparent;
  color:#ddd;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  font-size:12px;
  word-break:break-word
}
.api-section {
  padding-bottom:20px;
  max-width:500px;
  margin:0 auto
}
#generate.btn-success:active, #generate.btn-success:active span, #generate.btn-success:focus, #generate.btn-success:focus span, #generate.btn-success:hover, #generate.btn-success:hover span {
  color:#fff!important;
  border-color:#42c77b!important;
  background-color:#56cd89!important;
  outline:0
}
#generate.btn-success, #generate.btn-success span {
  cursor:default;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  -o-user-select:none;
  user-select:none;
  outline:0
}
#progressBar {
  background:0 0;
  border:1px solid #404040;
  border-radius:0;
  height:5px;
  margin-top:10px
}
.btn-file {
  position:relative;
  overflow:hidden
}
.btn-file input[type=file] {
  position:absolute;
  top:0;
  right:0;
  min-width:100%;
  min-height:100%;
  font-size:999px;
  text-align:right;
  filter:alpha(opacity=0);
  opacity:0;
  outline:0;
  background:#fff;
  cursor:inherit;
  display:block;
  width:10px
}
label {
  font-family:Roboto, sans-serif;
  font-weight:300
}
@media(-webkit-min-device-pixel-ratio:2), (min-resolution:192dpi) {
  body, h1, h2, h3, h4, label {
    font-weight:100!important
  }
}
#homeButtonContainer {
  position:absolute;
  width:100%;
  text-align:center
}
#homeButton {
  display:inline-block;
  border-radius:50%;
  width:60px;
  height:60px;
  margin-left:0;
  cursor:pointer;
  float:none;
  opacity:0
}
.canvas-wrapper.black #homeButton {
  background-color:#151515
}
.canvas-wrapper.white #homeButton {
  background-color:#eee
}
#homeButton:hover {
  opacity:1
}
.toast-warning {
  background-color:#e7bc38!important;
  max-width:400px
}
.toast-error {
  background-color:#e16f62!important;
  max-width:400px
}
.canvas-container {
  position:relative;
  display:inline-block;
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
  -moz-transform-origin:0 0;
  -o-transform-origin:0 0;
  -webkit-transform-origin:0 0;
  -ms-transform-origin:0 0
}
.canvas-inner-container {
  position:absolute;
  background:#000!important
}
#rotateButtons {
  position:absolute;
  color:#39b3d7
}
.canvas-container canvas {
  color:transparent!important
}
.canvas-container .placeholder, .canvas-container canvas {
  position:absolute;
  outline:0 solid transparent;
  cursor:pointer
}
.canvas-container .placeholder {
  top:0;
  left:0
}
.canvas-container .queue-info {
  text-align:center;
  color:#fff;
  display:block;
  width:100%
}
.canvas-container.watch .queue-info {
  padding:20px;
  padding-top:0;
  padding-bottom:10px
}
.canvas-container.watch.wearround .queue-info {
  padding-top:10px
}
.canvas-container.watch .branding {
  font-size:16px!important
}
.canvas-container.watch .branding-logo {
  width:24px
}
.canvas-container.watch .queue-info {
  font-size:24px!important
}
.canvas-container.watch .fs64 {
  font-size:48px!important
}
.canvas-container.phone .queue-info {
  font-size:32px;
  padding:20px;
  padding-top:20px
}
.canvas-container.phone .queue-holder, .canvas-container.tablet .queue-holder {
  width:100%;
  position:absolute;
  top:0;
  left:0;
  height:100%;
  margin-top:0;
  margin-left:0
}
body {
  background:#202020;
  background-image:linear-gradient(to bottom, #202020 33%, #222 75%, #262626 100%);
  background-size:100% 600px;
  background-repeat:no-repeat;
  background-position:bottom;
  color:#eee;
  font-family:Roboto, sans-serif;
  font-weight:300;
  letter-spacing:1px;
  word-break:break-word;
  min-height:800px
}
body.embed, body.embed * {
  padding:0;
  margin:0;
  max-width:none;
  background:0 0;
  text-align:left;
  float:left
}
body.embed .hide-device-border .canvas-inner-container {
  top:0!important;
  left:0!important
}
body.embed .hide-device-border.canvas-wrapper, body.embed .portrait.canvas-wrapper {
  transform:translate(0px, 0)!important;
  -webkit-transform:translate(0px, 0)!important;
  -moz-transform:translate(0px, 0)!important;
  -o-transform:translate(0px, 0)!important;
  -ms-transform:translate(0px, 0)!important
}
body.embed #rotateButtons, body.embed .options {
  display:none
}
body.embed .canvas-wrapper {
  margin:auto!important
}
.btn, button {
  letter-spacing:1px
}
.footer, .main {
  text-align:center;
  padding:40px 0
}
h1, h2, h3, h4 {
  font-family:Roboto, sans-serif;
  font-weight:300
}
.header .branding {
  font-family:'Courier New', 'Helvetica Neue', sans-serif;
  font-weight:300!important
}
#demo {
  border:1px solid #404040;
  margin:20px 0
}
.footer a {
  font-size:16px;
  color:#777;
  text-decoration:none;
  padding:0 1em
}
.footer a:hover {
  color:#fff
}
.signup {
  color:#eee
}
.danger, .has-error .help-block {
  color:#df7065!important
}
.header {
  text-align:left
}
.btn-default {
  background:#222;
  border:1px solid #404040;
  color:#fff;
  border-radius:0
}
.btn-default.active, .btn-default:active, .btn-default:focus, .btn-default:hover {
  background:#333;
  color:#fff;
  border:1px solid #404040
}
.btn, input.form-control, textarea.form-control {
  border-radius:0;
  font-family:'Courier New', 'Helvetica Neue', sans-serif;
  font-weight:300!important;
  vertical-align:bottom
}
.navbar, .navbar-collapse {
  background:0 0;
  border:0;
  padding:0;
  margin:0
}
@media(max-width:640px) {
  .not-iframe .page-container {
    padding:10px!important
  }
  .menu-full {
    display:none
  }
  .menu-narrow {
    display:block!important
  }
  body.not-iframe #demo {
    width:300px!important;
    height:248px!important
  }
  body.not-iframe .canvas-wrapper.phone.portrait {
    margin:0 auto;
    overflow:hidden
  }
  body.not-iframe .canvas-wrapper.phone.landscape {
    margin:0 auto
  }
  #rotateButtons {
    display:none
  }
  body.not-iframe #dummy.tablet.portrait, body.not-iframe .canvas-wrapper.tablet.portrait {
    overflow:hidden
  }
  .options.iframe-options {
    display:inline-block
  }
}
@media(min-width:641px) {
  .menu-narrow {
    display:none!important
  }
}
a, a:hover {
  color:#fff
}
.mobileNavList {
  float:right;
  margin-bottom:0;
  padding-left:0;
  list-style:none;
  text-align:right
}
.mobileNavList li {
  padding-bottom:10px
}
.navbar-toggle, .navbar-toggle.collapsed, .navbar-toggle:hover {
  background-color:transparent!important
}
.touch a:focus, .touch a:hover {
  background-color:transparent
}

Pop out