View
Theme
Font Style
7pt
8pt
9pt
10pt
11pt
Line Style
100%
110%
120%
130%
140%
Bold Keyword
Default
Inspector
Kkaefer
Eclipse
SQ Light
Lesser
Dark
Cobalt
Monokai
Rubyblue
Night
SQ Dark
Ambiance
Blackboard
Line Num.
Wrap Lines
Preview
Redraw
JS Tab
HTML Tab
CSS Tab
Live Tab
Prev. Tab
Next Tab
Browser
History…
Help
Edit
Settings
Auto Complete
Match Brackets
Match Highlight
Strip Whitespace
Auto Close Brackets
Auto Close Quotes
Show Print Margin
Undo
Redo
Delete
Select Line
Select All
Find & Replace
Find
Find in Repo.
Find Next
Find Previous
Replace Single
Replace All
Wrap Search
Revert
As Template
Diff Revision
Format
Compress
Text
Zen Coding
Indent
Tab Width
1
2
3
4
5
6
7
8
Indent Unit
1
2
3
4
5
6
7
8
Smart Indent
Use Tabs
Visible Tabs
Shift Left
Shift Right
Put Indent
Number
Increment by 1
Decrement by 1
Increment by 0.1
Decrement by 0.1
Increment by 10
Decrement by 10
Simple Math
Comment
Line
Move Up
Move Down
Copy Up
Copy Down
Go to Line…
Remove Line
Next Point
Prev. Point
Help
Share
Login
You can jump to the latest bin by adding
/latest
to your URL
×
z
Find
→
←
⟲
Replace
⊗
All
Replace
"use strict"; function uint8ArrayToString(a) { for(var b = a.length, c = "", d = 0; b > d; d += 65535) { var e = 65535; d + 65535 > b && (e = b - d), c += String.fromCharCode.apply(null, a.subarray(d, d + e)) } return c } function getFormattedDate() { var a = new Date, b = a.getFullYear() + "-" + ("0" + (a.getMonth() + 1)).slice(-2) + "-" + ("0" + a.getDate()).slice(-2) + " " + ("0" + a.getHours()).slice(-2) + "-" + ("0" + a.getMinutes()).slice(-2) + "-" + ("0" + a.getSeconds()).slice(-2); return b } angular.module("appetizeApp", ["ngCookies", "ngResource", "ngSanitize", "ngRoute", "ui.bootstrap.accordion", "angularFileUpload", "ui.bootstrap", "ui.tree", "perfect_scrollbar", "luegg.directives"]).config(["$routeProvider", "$locationProvider", "$httpProvider", "$compileProvider", function(a, b, c, d) { d.aHrefSanitizationWhitelist(/^\s*(https?|ftp|mailto|file|tel|appetize\.io):/), a.when("/", { templateUrl: "assets/appetize/main.html", pageTitle: "Appetize.io", pageDescription: "Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript.", pageCanonical: "https://appetize.io/", controller: "MainCtrl" }).when("/upload", { templateUrl: "assets/appetize/upload.html", pageTitle: "Upload", pageDescription: "Upload an iOS or Android app to Appetize.io to stream instantly using online web based iOS Simulators and Android Emulators.", pageCanonical: "https://appetize.io/upload", controller: "UploadCtrl" }).when("/demo", { templateUrl: "assets/appetize/demo.html", pageTitle: "Demo", pageDescription: "Demo Appetize.io's online web based iOS Simulators and Android Emulators directly in your browser.", pageCanonical: "https://appetize.io/demo", controller: "CanvasCtrl", reloadOnSearch: !1 }).when("/api", { templateUrl: "assets/appetize/api.html", pageTitle: "API", pageDescription: "Easily request and API token to gain programmatic access to Appetize.io's online web based iOS Simulators and Android Emulators.", pageCanonical: "https://appetize.io/api", controller: "ApiCtrl" }).when("/info", { templateUrl: "assets/appetize/info.html", pageTitle: "Info", pageDescription: "More information regarding Appetize.io's online web based iOS Simulators and Android Emulators.", pageCanonical: "https://appetize.io/info", controller: "MainCtrl" }).when("/app/:publicKey", { templateUrl: "assets/appetize/app.html", pageTitle: "App", pageDescription: "Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript.", pageCanonical: "https://appetize.io/", controller: "CanvasCtrl", reloadOnSearch: !1 }).when("/debug/:privateKey", { templateUrl: "assets/appetize/debug.html", pageTitle: "Debug", pageDescription: "Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript.", pageCanonical: "https://appetize.io/", controller: "CanvasCtrl", reloadOnSearch: !1 }).when("/manage/:privateKey", { templateUrl: "assets/appetize/manage.html", pageTitle: "Manage", pageDescription: "Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript.", pageCanonical: "https://appetize.io/", controller: "ManageCtrl" }).when("/embed", { templateUrl: "assets/appetize/embed.html", pageTitle: "Embed", pageDescription: "Use Appetize.io's online web based iOS Simulators and Android Emulators to embed and stream your app online, anywhere on the web.", pageCanonical: "https://appetize.io/embed", controller: "EmbedCtrl" }).when("/embed/:publicKey", { templateUrl: "assets/appetize/app.html", pageTitle: "Embed", pageDescription: "Use Appetize.io's online web based iOS Simulators and Android Emulators to embed and stream your app online, anywhere on the web.", pageCanonical: "https://appetize.io/embed", controller: "CanvasCtrl", reloadOnSearch: !1 }).when("/x", { pageTitle: "Exclude", templateUrl: "assets/appetize/exclude.html" }).otherwise({ pageTitle: "Appetize.io", pageDescription: "Online web based iOS Simulators and Android Emulators. Stream mobile apps in the browser with html5 and javascript.", pageCanonical: "https://appetize.io/", redirectTo: "/" }), b.html5Mode(!0), b.hashPrefix("!") }]).run(["$rootScope", "$location", function(a) { a.$on("$routeChangeSuccess", function(b, c) { c.$$route && (a.pageTitle = c.$$route.pageTitle, a.pageDescription = c.$$route.pageDescription, a.pageCanonical = c.$$route.pageCanonical) }) }]), angular.module("appetizeApp").controller("MainCtrl", ["$scope", "$rootScope", "$modal", "$location", "$anchorScroll", function() { console.log("MainCtrl loaded") }]), angular.module("appetizeApp").controller("ApiCtrl", ["$scope", "$rootScope", "$modal", "$http", "$location", "$anchorScroll", function(a, b, c, d) { console.log("ApiCtrl loaded"), a.token = function() { a.apiForm.$valid && !a.success && d.post("/api/token/generate", a.formData).success(function() { a.success = !0, b.recordEvent("api_token_created" + a.device) }).error(function() { a.error.token = !0 }) } }]), angular.module("appetizeApp").controller("DemoCtrl", ["$scope", "$rootScope", "$modal", "$location", "$anchorScroll", function() { console.log("DemoCtrl loaded") }]), angular.module("appetizeApp").controller("EmbedCtrl", ["$scope", "$rootScope", "$modal", "$location", "$anchorScroll", "appConstants", function(a, b, c, d, e, f) { function g() { return Math.ceil(a.screenOnly ? "portrait" == a.orientation ? f.screenDimensions[a.device].width * a.scale / 100 : f.screenDimensions[a.device].height * a.scale / 100 : "portrait" == a.orientation ? f.deviceDimensions[a.device].width * a.scale / 100 : f.deviceDimensions[a.device].height * a.scale / 100) } function h() { return Math.ceil(a.screenOnly ? "portrait" == a.orientation ? f.screenDimensions[a.device].height * a.scale / 100 : f.screenDimensions[a.device].width * a.scale / 100 : "portrait" == a.orientation ? f.deviceDimensions[a.device].height * a.scale / 100 : f.deviceDimensions[a.device].width * a.scale / 100) } console.log("EmbedCtrl loaded"), a.device = "iphone5s", a.deviceColor = "black", a.autoplay = !1, a.screenOnly = !1, a.xdocMsg = !1, a.scale = 100, a.orientation = "portrait", a.width = 378, a.height = 800, a.$watch("device", function(b, c) { b !== c && (a.width = g(), a.height = h()) }, !1), a.$watch("orientation", function(b, c) { b !== c && (a.width = g(), a.height = h()) }, !1), a.$watch("scale", function(b, c) { b !== c && (a.width = g(), a.height = h()) }, !1), a.$watch("screenOnly", function(b, c) { b !== c && (a.width = g(), a.height = h()) }, !1), a.$watch("paramsInput", function(b, c) { if(b !== c) if(b) try { var d = JSON.parse(b); "object" == typeof d ? (a.paramsError = !1, a.params = encodeURIComponent(b.replace(/\s+/g, ""))) : (a.params = null, a.paramsError = !0) } catch(e) { a.params = null, a.paramsError = !0 } else a.params = null, a.paramsError = !1 }, !1), a.setLanguage = function(b) { a.language = b }, a.status = { isopen: !1 }, a.languages = ["de", "en", "fr", "it", "ja", "ko", "pt", "ru"] }]), angular.module("appetizeApp").controller("ManageCtrl", ["$scope", "$rootScope", "$routeParams", "$timeout", "$upload", "$parse", "$http", "$modal", "$location", "$anchorScroll", "appConstants", function(a, b, c, d, e, f, g, h, i, j, k) { function l() { var c = {}; for(var d in a.appConstants.osCompatibility[b.app.platform]) for(var e in a.appConstants.osCompatibility[b.app.platform][d]) k.osVersionDefaults[a.appConstants.osCompatibility[b.app.platform][d][e]] && (c[a.appConstants.osCompatibility[b.app.platform][d][e]] || (c[a.appConstants.osCompatibility[b.app.platform][d][e]] = []), c[a.appConstants.osCompatibility[b.app.platform][d][e]].push(d)); a.osVersionOptions = c } function m() { b.app.disableHome || (b.app.disableHome = !1), b.app.disabled || (b.app.disabled = !1), b.app.timeout || (b.app.timeout = 30), b.app.useLastFrame || (b.app.useLastFrame = !1), l(), d(function() { jscolor.bind(), updateJsColor() }, 500) } console.log("ManageCtrl loaded"), toastr.options.timeOut = 1e4, toastr.options.positionClass = "toast-bottom-full-width"; var n = new X2JS; a.appConstants = k, a.osVersionOptions = {}, a.disabled = {}, a.pageConfig = {}, a.fieldChanged = {}, a.fieldChangeSuccess = {}, c.privateKey && g.get("/api/app/private/" + c.privateKey).success(function(c) { b.app = c, m(), a.logMonths = []; for(var d = new Date, e = new Date(d.getFullYear(), d.getMonth(), 1); e > new Date(b.app.startDate);) a.logMonths.push(new Date(e)), e.setMonth(e.getMonth() - 1); a.logMonths.push(new Date(e)), a.logMonth = a.logMonths[0], a.$watch("app.buttonText", function(b, c) { b !== c && (a.fieldChangeSuccess.buttonText = !1, a.fieldChanged.buttonText = !0) }, !1), a.$watch("app.preLaunchButtonTextColor", function(b, c) { b !== c && (a.fieldChangeSuccess.preLaunchButtonTextColor = !1, a.fieldChanged.preLaunchButtonTextColor = !0) }, !1), a.$watch("app.preLaunchButtonBackgroundColor", function(b, c) { b !== c && (a.fieldChangeSuccess.preLaunchButtonBackgroundColor = !1, a.fieldChanged.preLaunchButtonBackgroundColor = !0) }, !1), a.$watch("app.preLaunchButtonBackgroundOpacity", function(b, c) { b !== c && (a.fieldChangeSuccess.preLaunchButtonBackgroundOpacity = !1, a.fieldChanged.preLaunchButtonBackgroundOpacity = !0) }, !1), a.$watch("app.postSessionButtonText", function(b, c) { b !== c && (a.fieldChangeSuccess.postSessionButtonText = !1, a.fieldChanged.postSessionButtonText = !0) }, !1), a.$watch("app.postSessionButtonTextColor", function(b, c) { b !== c && (a.fieldChangeSuccess.postSessionButtonTextColor = !1, a.fieldChanged.postSessionButtonTextColor = !0) }, !1), a.$watch("app.postSessionButtonBackgroundColor", function(b, c) { b !== c && (a.fieldChangeSuccess.postSessionButtonBackgroundColor = !1, a.fieldChanged.postSessionButtonBackgroundColor = !0) }, !1), a.$watch("app.postSessionButtonBackgroundOpacity", function(b, c) { b !== c && (a.fieldChangeSuccess.postSessionButtonBackgroundOpacity = !1, a.fieldChanged.postSessionButtonBackgroundOpacity = !0) }, !1), a.$watch("app.launchUrl", function(b, c) { b !== c && (a.fieldChangeSuccess.launchUrl = !1, a.fieldChanged.launchUrl = !0) }, !1) }).error(function() { a.error = !0 }), a.timeout = function() { a.disabled.timeout = !0, g.post("/api/app/manage/update", { privateKey: b.app.privateKey, timeout: b.app.timeout }).success(function(c) { b.app = c, m(), a.disabled.timeout = !1 }).error(function(b) { console.log(b), a.disabled.timeout = !1 }) }, a.disable = function(c) { a.disabled.disabled = !0, g.post("/api/app/manage/update", { privateKey: b.app.privateKey, disabled: c }).success(function(c) { b.app = c, a.disabledConfirm = null, a.showDisabledButton = !1, m(), a.disabled.disabled = !1 }).error(function(b) { console.log(b), a.disabledConfirm = null, a.showDisabledButton = !1, a.disabled.disabled = !1 }) }, a.disableHome = function() { a.disabled.disableHome = !0, g.post("/api/app/manage/update", { privateKey: b.app.privateKey, disableHome: b.app.disableHome }).success(function(c) { b.app = c, m(), a.disabled.disableHome = !1 }).error(function(b) { console.log(b), a.disabled.disableHome = !1 }) }, a.updateFieldWithChange = function(c) { a.fieldChangeSuccess[c] = !1, a.disabled[c] = !0, g.post("/api/app/manage/update", { privateKey: b.app.privateKey, field: c, value: b.app[c] }).success(function(d) { b.app = d, m(), a.disabled[c] = !1, a.fieldChangeSuccess[c] = !0, a.fieldChanged[c] = !1 }).error(function(b) { console.log(b), a.disabled[c] = !1 }) }; var o = "https://api.appetize.io"; "localhost" == i.$$host && (o = "http://localhost:9081"), a.downloadUsage = function() { var d = new Date(b.app.startDate), e = d.getFullYear() + "-" + ("0" + (d.getMonth() + 1)).slice(-2); a.disabled.downloadUsage = !0, g({ url: o + "/v1/app/usage/" + c.privateKey + "?startMonth=" + e, method: "GET" }).success(function(c) { var d = b.app.publicKey + "-summary.csv", e = new Blob([c], { type: "text/csv" }); saveAs(e, d), a.disabled.downloadUsage = !1 }).error(function() { alert("Error receiving usage. Please try again or email hello@appetize.io."), a.disabled.downloadUsage = !1 }) }, a.downloadLogs = function() { var d = a.logMonth.getFullYear() + "-" + ("0" + (a.logMonth.getMonth() + 1)).slice(-2); a.disabled.downloadLogs = !0, g({ url: o + "/v1/app/logs/" + c.privateKey + "?month=" + d, method: "GET" }).success(function(c) { var e = d + "-" + b.app.publicKey + "-log.csv", f = new Blob([c], { type: "text/csv" }); saveAs(f, e), a.disabled.downloadLogs = !1 }).error(function() { alert("Error receiving logs. Please try again or email hello@appetize.io."), a.disabled.downloadLogs = !1 }) }, a.deleteGraphic = function(c, d, e) { d && d[c] && (a.disabled.uploadGraphic = !0, delete d[c], g.post("/api/app/manage/update", { privateKey: b.app.privateKey, field: e, value: b.app[e] }).success(function(c) { b.app = c, m(), a.disabled.uploadGraphic = !1 }).error(function(b) { console.log(b), a.disabled.uploadGraphic = !1 })) }, a.onGraphicSelect = function(c, d, h) { var i = c[0]; if(i.size > 5e6) return void toastr.error("Your proposed upload exceeds the maximum allowed size of 5MB"); a.disabled.uploadGraphic = !0; g({ method: "GET", url: "/api/s3Credential/static", params: { type: c[0].type } }).success(function(c) { a.fileUploadProgress = 0, a.fileUpload = e.upload({ url: c.url, method: "POST", data: { key: c.key, acl: "public-read", AWSAccessKeyId: c.AWSAccessKeyId, success_action_status: "201", Policy: c.s3Policy, Signature: c.s3Signature }, file: i }).then(function(c) { if(a.fileUploadProgress = !1, 201 === c.status) { var e = n.xml_str2json(c.data), i = f(h); i.assign(a, decodeURIComponent(e.PostResponse.Location)), g.post("/api/app/manage/update", { privateKey: b.app.privateKey, field: d, value: b.app[d] }).success(function(c) { b.app = c, m(), a.disabled.uploadGraphic = !1 }).error(function(b) { console.log(b), a.disabled.uploadGraphic = !1 }) } else toastr.error("Error uploading file"), a.disabled.uploadGraphic = !1 }, function(b) { var c = n.xml_str2json(b.data); toastr.error("EntityTooLarge" == c.Error.Code ? "Your proposed upload exceeds the maximum allowed size of 5MB" : "Error uploading file"), a.disabled.uploadGraphic = !1 }, function(b) { a.fileUploadProgress = parseInt(100 * b.loaded / b.total) }) }).error(function() { toastr.error("Error uploading file"), a.disabled.uploadGraphic = !1 }) } }]), angular.module("appetizeApp").controller("NavbarCtrl", ["$scope", "$location", function(a, b) { a.isActive = function(a) { return a === b.path() } }]), angular.module("appetizeApp").controller("UploadCtrl", ["$scope", "$rootScope", "$upload", "$http", "$location", "$anchorScroll", function(a, b, c, d) { function e(a, b) { return -1 !== a.toLowerCase().indexOf(b.toLowerCase(), a.length - b.length) } console.log("UploadCtrl loaded"); var f = new X2JS; a.error = {}; var g = null; a.progress = !1, a.formData = {}, d.get("/api/s3Credentials").success(function(b) { g = b, a.loaded = !0 }).error(function() { a.error.load = !0 }), a.onFileSelect = function(h) { for(var i = 0; i < h.length; i++) { var j = h[i], k = null; if(e(j.name, ".zip")) k = g.ios; else { if(!e(j.name, ".apk")) return a.error.message = "Please upload a .zip for iOS, or .apk for Android", void(a.error.upload = !0); k = g.android } if(a.error.upload = !1, a.formData.location = null, a.error.message = null, a.success = !1, "object" == typeof a.pageConfig && (a.pageConfig.newValue = !1), j.size > 1e9) return a.error.message = "Your proposed upload exceeds the maximum allowed size of 1GB", void(a.error.upload = !0); a.progress = 0, a.upload = c.upload({ url: g.url, method: "POST", data: { key: k.key, acl: "authenticated-read", AWSAccessKeyId: k.AWSAccessKeyId, success_action_status: "201", Policy: k.s3Policy, Signature: k.s3Signature }, file: j }).then(function(c) { if(a.progress = !1, 201 === c.status) { var e = f.xml_str2json(c.data); b.app && b.app.privateKey ? d.post("/api/app/manage/update", { privateKey: b.app.privateKey, location: decodeURIComponent(e.PostResponse.Location), key: k.key }).success(function(c) { b.app.updated = c.updated, b.app.platform = c.platform, "object" == typeof a.pageConfig && (a.pageConfig.newValue = !0), a.formData.location = c.file }).error(function(b) { console.log(b), a.error.upload = !0 }) : (a.formData.location = decodeURIComponent(e.PostResponse.Location), a.formData.key = k.key) } else a.error.upload = !0 }, function(b) { var c = f.xml_str2json(b.data); "EntityTooLarge" == c.Error.Code && (a.error.message = "Your proposed upload exceeds the maximum allowed size of 1GB"), a.progress = !1, a.error.upload = !0 }, function(b) { a.progress = parseInt(100 * b.loaded / b.total) }) } }, a.generate = function() { a.uploadForm.$valid && !a.success && d.post("/api/app/generate", a.formData).success(function() { a.success = !0, b.recordEvent("app_created_via_upload" + a.device) }).error(function() { a.error.generate = !0 }) } }]), angular.module("appetizeApp").controller("CanvasCtrl", ["$scope", "$routeParams", "$timeout", "$rootScope", "$modal", "$location", "$anchorScroll", "$http", "Device", "appConstants", function(a, b, c, d, e, f, g, h, i, j) { function k() { var b = {}; for(var c in j.osCompatibility) for(var d in j.osCompatibility[c]) for(var e in j.osCompatibility[c][d]) j.osVersionDefaults[j.osCompatibility[c][d][e]] && (b[j.osCompatibility[c][d][e]] || (b[j.osCompatibility[c][d][e]] = []), b[j.osCompatibility[c][d][e]].push(d)); a.osVersionOptions = b } function l(a) { return "android" == a ? d.app.architectures && d.app.architectures.length > 0 && -1 === d.app.architectures.indexOf("x86") ? j.androidDefaultNoX86 : j.androidNonDefaultDevices.indexOf(b.device) > -1 ? b.device : j.androidDefault : j.iosNonDefaultDevices.indexOf(b.device) > -1 ? b.device : j.iosDefault } console.log("CanvasCtrl loaded"), d.devices = [], d.isEmbed = f.path().indexOf("/embed/") > -1, a.osVersionOptions = {}, k(); var m = {}; "landscape" == b.orientation ? (m.orientation = "landscape", m.rotation = 270) : (m.orientation = "portrait", m.rotation = 0); var n = parseInt(b.scale); if(m.scale = "number" == typeof n && n >= 10 && 100 >= n ? n : j.tabletDevices.indexOf(b.device) > -1 ? 50 : 75, m.deviceColor = "silver" == b.deviceColor || "white" == b.deviceColor ? "white" : "black", m.showDeviceBorder = "true" == b.screenOnly ? !1 : !0, m.debug = "true" == b.debug ? !0 : !1, m.noVideo = "true" == b.noVideo ? !0 : !1, m.physical = j.physicalDevices.indexOf(b.device) > -1 ? !0 : !1, b.language && (m.language = b.language), b.locale && (m.locale = b.locale), b.osVersion && (m.osVersion = b.osVersion), b.location && (b.location.match(/^-?[\d]{1,3}[.][\d]+,-?[\d]{1,3}[.][\d]+$/) ? m.location = b.location : console.log("Invalid location specified, must be expressed location=10.123,42.12\nYou specified: " + b.location)), b.launchUrl && (m.launchUrl = b.launchUrl), m.notFirstRequest = !1, m.params = null, b.params) try { m.params = JSON.parse(decodeURIComponent(b.params)), m.paramsString = JSON.parse(decodeURIComponent(b.params)) } catch(o) { m.paramsString = "Unable to parse params", console.log("Error parsing params, ", o) } if(m.plistEdit = null, b.plistEdit) try { m.plistEdit = JSON.parse(decodeURIComponent(b.plistEdit)), m.plistEditString = JSON.parse(decodeURIComponent(b.plistEdit)) } catch(o) { m.plistEditString = "Unable to parse plistEdit", console.log("Error parsing plistEdit, ", o) } d.devices.push(new i(m)), a.addWatch = function() { var a = { name: "wearround", deviceColor: "black", showDeviceBorder: !0, notFirstRequest: !1, params: null, type: "watch", scale: 75, orientation: "portrait", platform: "android", rotation: 0 }; d.devices.push(new i(a)), d.devices[1].setDeviceParameters("wearround"), d.devices[1].updateScaledWidthsAndHeights(), d.devices[0].appLaunch && d.devices[1].requestSession() }, a.connectWatch = function() { d.devices[1].connectWatch(d.devices[0].connectionString, d.devices[0].connectionToken) }, a.removeWatch = function() { d.devices[d.devices.length - 1].destroy(), d.devices.pop() }; var p = ["Hello from Appetize.io!", "You're looking great today!", "Knock, Knock...", "Go on, try and break me!", "Sorry, I'm not talkative right now"]; if(a.sendSms = function() { "watch" != d.devices[0].type && d.devices[0].appetizer && d.devices[1] && (d.devices[0].appetizer.emit("sendSms", { message: p[Math.floor(Math.random() * p.length)] }), d.devices[1].heartbeat()) }, "true" == b.autoplay && (a.autoplay = !0), toastr.options.timeOut = 1e4, toastr.options.positionClass = "toast-bottom-full-width", d.app = null, b.publicKey && "demo" != b.publicKey) "
" == b.publicKey || b.publicKey.indexOf("<") > -1 || b.publicKey.indexOf(">") > -1 ? a.mustReplacePublicKey = !0 : h.get("/api/app/public/" + b.publicKey).success(function(c) { d.app = c, d.devices[0].updateDevice(l(c.platform)), 1 == a.autoplay && d.devices[0].requestSession(), b.addWatch && a.addWatch() }).error(function(b, c) { a.error = 401 === c ? { message: "This app is no longer available." } : { message: "Error loading app, please verify URL" } }); else if(b.privateKey) h.get("/api/app/private/" + b.privateKey).success(function(c) { d.app = c, d.devices[0].updateDevice(l(c.platform)), d.devices[0].debug = !0, 1 == a.autoplay && d.devices[0].requestSession(), b.addWatch && a.addWatch() }).error(function() { a.error = !0 }); else if(d.isEmbed && "demo" != b.publicKey) if(3 === f.path().split("/").length) { var q = f.path().split("/")[2]; h.get("/api/app/public/" + q).success(function(c) { d.app = c, d.devices[0].updateDevice(l(c.platform)), 1 == a.autoplay && d.devices[0].requestSession(), b.addWatch && a.addWatch() }).error(function(b, c) { a.error = 401 === c ? { message: "This app is no longer available." } : { message: "Error loading app, please verify URL" } }) } else a.error = !0; else d.devices[0].updateDevice(j.iosDevices.indexOf(b.device) > -1 || j.androidDevices.indexOf(b.device) > -1 ? b.device : j.iosDefault), 1 == a.autoplay && d.devices[0].requestSession(), b.addWatch && a.addWatch(), d.isDemo = !0; if(a.$on("$locationChangeStart", function(a, b, c) { if(!(c.indexOf(-1 == b.indexOf("?") ? b : b.substring(0, b.indexOf("?"))) > -1)) { for(var e = 0; e < d.devices.length; e++) d.devices[e].destroy(); d.devices = [], d.app = null, d.isEmbed = null, $(document).off("keypress").keypress(function() {}), $(document).off("keydown").keydown(function() {}), $(document).off("keyup").keyup(function() {}), toastr.remove() } }), "true" == b.xdocMsg) { var r = function(a) { "requestSession" == a.data ? d.devices[0].appetizer || d.devices[0].queue || d.devices[0].requestSession() : "emitHomeButton" == a.data ? d.devices[0].emitHomeButton() : "rotateLeft" == a.data ? (d.devices[0].rotateLeft(), d.$apply(function() {})) : "rotateRight" == a.data ? (d.devices[0].rotateRight(), d.$apply(function() {})) : "cleanConnection" == a.data ? d.devices[0].cleanConnection() : "endSession" == a.data ? d.devices[0].endSession() : "saveScreenshot" == a.data ? d.devices[0].appetizer && d.devices[0].appLaunch && d.devices[0].screenshot() : "getScreenshot" == a.data ? d.devices[0].appetizer && d.devices[0].appLaunch && d.devices[0].xdocScreenshot() : "heartbeat" == a.data ? d.devices[0].appetizer && d.devices[0].appLaunch && d.devices[0].appetizer.emit("userInteraction", { type: "heartbeat" }) : "restartApp" == a.data ? d.devices[0].appetizer && d.devices[0].appLaunch && d.devices[0].appetizer.emit("restartApp") : "shakeDevice" == a.data ? d.devices[0].appetizer && d.devices[0].appLaunch && d.devices[0].appetizer.emit("shakeDevice") : a.data && a.data.type && d.devices[0].appetizer && d.devices[0].appLaunch && ("mouseclick" == a.data.type && a.data.x && a.data.y ? (d.devices[0].appetizer.emit("userInteraction", { type: "mousedown", timeStamp: Date.now(), xPos: a.data.x, yPos: a.data.y }), d.devices[0].appetizer.emit("userInteraction", { type: "mouseup", timeStamp: Date.now(), xPos: a.data.x, yPos: a.data.y })) : "mousedown" == a.data.type && a.data.x && a.data.y ? d.devices[0].appetizer.emit("userInteraction", { type: "mousedown", timeStamp: Date.now(), xPos: a.data.x, yPos: a.data.y }) : "mousemove" == a.data.type && a.data.x && a.data.y ? d.devices[0].appetizer.emit("userInteraction", { type: "mousemove", timeStamp: Date.now(), xPos: a.data.x, yPos: a.data.y }) : "mouseup" == a.data.type && a.data.x && a.data.y ? d.devices[0].appetizer.emit("userInteraction", { type: "mouseup", timeStamp: Date.now(), xPos: a.data.x, yPos: a.data.y }) : "keypress" == a.data.type && a.data.key ? d.devices[0].appetizer.emit("userInteraction", { type: "keypress", shiftKey: a.data.shiftKey + "", key: a.data.key, timeStamp: Date.now() }) : "language" == a.data.type && a.data.value ? d.devices[0].appetizer.emit("setLanguage", { language: a.data.value, timeStamp: Date.now() }) : "location" == a.data.type && a.data.value ? d.devices[0].appetizer.emit("setLocation", { location: a.data.value, timeStamp: Date.now() }) : "url" == a.data.type && a.data.value && d.devices[0].appetizer.emit("openUrl", { url: a.data.value, timeStamp: Date.now() })) }; window.addEventListener("message", r, !1) } }]), angular.module("appetizeApp").controller("MailchimpSubscribeFormCtrl", ["$scope", "MailchimpSubscriptionResource", function(a, b) { a.subscription = new b, a.doSubscribe = function() { a.subscription.$post(function(b) { if(b.readableErrorMessage = "", "error" === b.result) { if(b.msg) { var c = b.msg.split(" - ", 2); b.readableErrorMessage = c[1] ? c[1] : c[0] } } else $rootScope.recordEvent("newsletter_subscriber_created" + a.device) }, function() {}) } }]), angular.module("appetizeApp").factory("MailchimpSubscriptionResource", ["$resource", function(a) { var b, c, d; return b = "https://appetize.us9.list-manage.com/subscribe/post-json", c = { EMAIL: "@email", c: "JSON_CALLBACK", u: "d420947fe017981267fe49585", id: "91d7072a69" }, d = { post: { method: "jsonp" } }, new a(b, c, d) }]), angular.module("appetizeApp").controller("AnalyticsCtrl", ["$scope", "$http", "$rootScope", "$location", "$timeout", "$upload", "$routeParams", "$window", function(a, b, c, d) { var _gaq = {push: function() {}} , mixpanel = {track: function() {}}; c.recordEvent = function(a) { -1 === document.cookie.indexOf("analytics-ignore") ? (mixpanel.track(a), _gaq.push(["_trackEvent", "userInteraction", a])) : console.log("excluded: " + a) }, a.$on("$routeChangeSuccess", function() { -1 === document.cookie.indexOf("analytics-ignore") ? _gaq.push(["_trackPageview", d.url()]) : console.log("excluded: " + d.url()) }) }]), angular.module("appetizeApp").factory("Device", ["$location", "$rootScope", "$routeParams", "appConstants", function(a, b, c, d) { var e = function(e) { function f() { for(var a in d.osCompatibility) for(var b in d.osCompatibility[a]) for(var c in d.osCompatibility[a][b]) d.osVersionDefaults[d.osCompatibility[a][b][c]] && (k[d.osCompatibility[a][b][c]] || (k[d.osCompatibility[a][b][c]] = []), k[d.osCompatibility[a][b][c]].push(b)) } this.initialize = function(a) { var d = this; angular.extend(d, a), this.canvasId = Date.now(), this.debugConsole = "Log messages will follow once session has started...\n", this.clientController = io.connect("https://appetize.io/client", { multiplex: !1 }), this.clientController.on("queue", function(a) { d.queue || "true" != c.xdocMsg || window.parent.postMessage("sessionQueued", "*"), d.queue = a.position, b.$apply(function() {}) }), this.clientController.on("newSession", function(a) { d.connect(a) }), this.clientController.on("userError", function(a) { b.recordEvent("user_error_on_clientController"), "true" == c.xdocMsg && window.parent.postMessage("userError", "*"), a.message && toastr.error(a.message) }) }, this.connectWatch = function(a, b) { this.appetizer && this.appetizer.emit("connectWearToPhone", { connectionString: a, connectionToken: b }) }, this.screenshot = function() { var a = new Blob([m], { type: "image/jpeg" }); saveAs(a, getFormattedDate() + " Screenshot.jpg") }, this.xdocScreenshot = function() { var a = new Uint8Array(m), b = uint8ArrayToString(a), c = btoa(b), d = "data:image/jpeg;base64," + c; window && window.parent && window.parent.postMessage({ type: "screenshot", data: d }, "*") }, this.emitHomeButton = function() { this.appetizer && this.appLaunch && this.appetizer.emit("userInteraction", { type: "keypress", which: null, shiftKey: null, key: "home", timeStamp: Date.now() }) }, this.heartbeat = function() { this.appetizer && this.appLaunch && this.appetizer.emit("userInteraction", { type: "heartbeat" }) }; var g = 0, h = 0; this.setRotation = function(a) { var b = (a - this.rotation) % 360; if(0 != b) { var c = document.getElementById(this.canvasId); if(c) { var e = c.getContext("2d"); if(e) { e.translate(-1 * g, -1 * h), e.rotate(-this.rotation * Math.PI / 180), e.rotate(a * Math.PI / 180); var f = 0, i = 0; 0 == a || (90 == a ? i = -1 * d.screenDimensions[this.name].height : 180 == a ? (f = -1 * d.screenDimensions[this.name].width, i = -1 * d.screenDimensions[this.name].height) : 270 == a && (f = -1 * d.screenDimensions[this.name].width)), e.translate(f, i), g = f, h = i, this.orientation = a % 180 == 0 ? "portrait" : "landscape", this.rotation = a, this.updateScaledWidthsAndHeights(); var j = new Uint8Array(m), k = uint8ArrayToString(j), l = btoa(k), n = new Image; n.onload = function() { var a = 0, b = 0; e.clearRect(0, 0, 2e3, 2e3), e.drawImage(this, a, b) }, n.src = "data:image/jpeg;base64," + l; console.image(k.src); } } } }, this.emitUserInteraction = function(a) { if(this.appetizer) { if(this.physical && 0 != this.rotation && a.xPos && a.yPos) { var b = 360 - this.rotation, c = a.xPos, e = a.yPos; a.xPos = c * Math.cos(b * Math.PI / 180) - e * Math.sin(b * Math.PI / 180), a.yPos = c * Math.sin(b * Math.PI / 180) + e * Math.cos(b * Math.PI / 180), 90 == this.rotation ? a.yPos += d.screenDimensions[this.name].height : 180 == this.rotation ? (a.xPos += d.screenDimensions[this.name].width, a.yPos += d.screenDimensions[this.name].height) : 270 == this.rotation && (a.xPos += d.screenDimensions[this.name].width) } this.appetizer.emit("userInteraction", a) } }; var i = 0; this.rotateLeft = function() { return this.noVideo ? (toastr.remove(), void toastr.warning("Rotation not supported when noVideo=true")) : void(this.rotateDisabled || (this.appLaunch ? (this.rotateDisabled = "disabled", this.appetizer && this.appLaunch && this.appetizer.emit("userInteraction", { type: "keypress", which: null, shiftKey: null, key: "rotateLeft", timeStamp: Date.now() }), i += 270, i %= 360) : (this.rotation += 270, this.rotation %= 360, this.orientation = this.rotation % 180 == 90 ? "landscape" : "portrait"), this.updateScaledWidthsAndHeights())) }, this.rotateRight = function() { return this.noVideo ? (toastr.remove(), void toastr.warning("Rotation not supported when noVideo=true")) : void(this.rotateDisabled || (this.appLaunch ? (this.rotateDisabled = "disabled", this.appetizer && this.appLaunch && this.appetizer.emit("userInteraction", { type: "keypress", which: null, shiftKey: null, key: "rotateRight", timeStamp: Date.now() }), i += 90, i %= 360) : (this.rotation += 90, this.rotation %= 360, this.orientation = this.rotation % 180 == 90 ? "landscape" : "portrait"), this.updateScaledWidthsAndHeights())) }, this.cleanConnections = function() { for(var a = 0; a < b.devices.length; a++) b.devices[a].cleanConnection() }, this.destroy = function() { this.cleanConnection(), this.clientController && this.clientController.disconnect() }; var j = !1; this.cleanConnection = function() { if(b.app && b.app.useLastFrame && !j && this.appLaunch) { b.app.lastFrame || (b.app.lastFrame = {}); var a = new Uint8Array(m), d = uint8ArrayToString(a), e = btoa(d), f = "data:image/jpeg;base64," + e; b.app.lastFrame[this.name] = f, j = !0; console.image(f); } this.appetizer && (this.appetizer.disconnect(), "true" == c.xdocMsg && window.parent.postMessage("sessionEnded", "*")), this.clientController && this.clientController.emit("removeFromQueue"), this.firstFrameReceived = !1, this.appLaunch = !1, this.queue = !1, this.connection = !1, this.appetizer = null, j = !1; var g = document.getElementById(this.canvasId); if(g) { var h = g.getContext("2d"); h && h.clearRect(0, 0, 2e3, 2e3) } "Log messages will follow once session has started...\n" !== this.debugConsole && (this.debugConsole += "\n\nLog messages will follow once session has started...\n"), $("#" + self.canvasId).off("mousedown").mousedown(function() {}), $(document).off("mousedown").mousedown(function() {}), $(document).off("mousemove").mousemove(function() {}), $(document).off("mouseup").mouseup(function() {}), $("#" + self.canvasId).off("touchstart").on("touchstart", function() {}), $(document).off("touchstart").on("touchstart", function() {}), $(document).off("touchmove").on("touchmove", function() {}), $(document).off("touchend").on("touchend", function() {}) }, this.setDeviceParameters = function(a) { d.deviceDimensions[a] && (this.deviceWidth = d.deviceDimensions[a].width, this.deviceHeight = d.deviceDimensions[a].height), this.platform = d.iosDevices.indexOf(a) > -1 ? "ios" : "android", d.tabletDevices.indexOf(a) > -1 ? (this.type = "tablet", (this.name && this.name != a || !this.name && !c.scale) && (this.scale = 50)) : d.watchDevices.indexOf(a) > -1 ? (this.type = "watch", this.name && this.name != a && (this.scale = 75)) : (this.type = "phone", this.name && this.name != a && (this.scale = 75)), this.physical = d.physicalDevices.indexOf(a) > -1 ? !0 : !1, this.name = a }, this.updateDevice = function(a) { if(toastr.remove(), this.showPostSession = !1, b.app && b.app.useLastFrame && this.appLaunch) { b.app.lastFrame || (b.app.lastFrame = {}); var c = new Uint8Array(m), d = uint8ArrayToString(c), e = btoa(d), f = "data:image/jpeg;base64," + e; b.app.lastFrame[this.name] = f, j = !0; console.image(f); } this.setDeviceParameters(a), this.updateScaledWidthsAndHeights(), this.cleanConnections(), this.setDefaultOSVersion(a), this.checkValidOSVersion(a) }, this.updateColor = function(c) { b.devices && b.devices[0] == this && a.search("deviceColor", c) }; var k = {}; f(), this.setDefaultOSVersion = function(e) { !c.osVersion && b.app && b.app.defaultOSVersions && b.app.defaultOSVersions[e] ? (this.osVersion = b.app.defaultOSVersions[e], a.search("osVersion", this.osVersion)) : k[this.name] && -1 === k[this.name].indexOf(this.osVersion) && (this.osVersion = d.osVersionDefaults[this.name], a.search("osVersion", this.osVersion)) }, this.updateOsVersion = function(c) { this.cleanConnections(), b.devices && b.devices[0] == this && a.search("osVersion", c) }, this.checkValidOSVersion = function(b) { this.osVersion && (d.osCompatibility[this.platform] && d.osCompatibility[this.platform][this.osVersion] && d.osCompatibility[this.platform][this.osVersion].indexOf(b) > -1 || (toastr.remove(), toastr.error("Invalid osVersion. OS: " + this.osVersion + " for device: " + b + " not supported. Device will use default osVersion."), delete this.osVersion, a.search("osVersion", null))) }, this.updateScaledWidthsAndHeights = function() { if(this.canvasWrapperWidth = Math.ceil(d.deviceDimensions[this.name].width * this.scale / 100), this.canvasWrapperHeight = Math.ceil(d.deviceDimensions[this.name].height * this.scale / 100), this.divMinWidth = "portrait" == this.orientation ? this.canvasWrapperWidth : this.canvasWrapperHeight, this.canvasInnerContainerTop = d.screenPositions[this.name][this.rotation].top, this.canvasInnerContainerLeft = d.screenPositions[this.name][this.rotation].left, this.rotateButtonsWidth = d.screenPositions[this.name].rotateButtons.width, this.rotateButtonsHeight = d.screenPositions[this.name].rotateButtons.height, this.rotateButtonsPosition = d.screenPositions[this.name].rotateButtons[this.orientation], "ios" == this.platform) for(this.homeButtonContainer = d.screenPositions[this.name].homeButtonContainer[this.rotation], this.homeButtonDimensions = d.screenPositions[this.name].homeButtonDimensions; b.devices.length > 1;) b.devices[b.devices.length - 1].destroy(), b.devices.pop(); "landscape" == this.orientation ? (this.canvasInnerContainerWidth = d.screenDimensions[this.name].height, this.canvasInnerContainerHeight = d.screenDimensions[this.name].width) : (this.canvasInnerContainerWidth = d.screenDimensions[this.name].width, this.canvasInnerContainerHeight = d.screenDimensions[this.name].height), b.isEmbed && "landscape" == this.orientation && (this.embedTranslateX = Math.ceil(d.embedTranslations[this.name].x * this.scale / 100), this.embedTranslateY = Math.ceil(d.embedTranslations[this.name].y * this.scale / 100)), b.devices && b.devices[0] == this && (a.search("device", this.name), a.search("scale", this.scale), a.search("orientation", this.orientation)) }; var l = !1; this.requestSession = function() { this.cleanConnection(), !l && this.clientController && (toastr.remove(), l = !0, b.app && b.app.privateKey ? (this.clientController.emit("requestSession", { publicKey: b.app.publicKey, privateKey: b.app.privateKey, debug: this.debug, deviceType: this.name, rotation: this.rotation, params: this.params, plistEdit: this.plistEdit, noVideo: this.noVideo, language: this.language, locale: this.locale, location: this.location, launchUrl: this.launchUrl, osVersion: this.osVersion }), b.recordEvent("debug_" + this.name + "_session_requested")) : b.app && b.app.publicKey ? (this.clientController.emit("requestSession", { publicKey: b.app.publicKey, debug: this.debug, deviceType: this.name, rotation: this.rotation, params: this.params, plistEdit: this.plistEdit, noVideo: this.noVideo, language: this.language, locale: this.locale, location: this.location, launchUrl: this.launchUrl, osVersion: this.osVersion }), b.recordEvent("app_" + this.name + "_session_requested")) : (this.clientController.emit("requestSession", { publicKey: "demo", debug: this.debug, deviceType: this.name, rotation: this.rotation, params: this.params, plistEdit: this.plistEdit, noVideo: this.noVideo, language: this.language, locale: this.locale, location: this.location, launchUrl: this.launchUrl, osVersion: this.osVersion }), b.recordEvent("demo_" + this.name + "_session_requested")), this.notFirstRequest = !0, "true" == c.xdocMsg && window.parent.postMessage("sessionRequested", "*")), setTimeout(function() { l = !1 }, 500) }, this.updateScale = function(a) { this.scale = a, this.updateScaledWidthsAndHeights() }, this.sendHeartbeatsToOtherDevices = function() { for(var a = 0; a < b.devices.length; a++) b.devices[a] !== this && b.devices[a].heartbeat() }, this.endSession = function() { this.cleanConnections(), b.$apply(function() {}) }; var m; this.connect = function(a) { var e = this; if(e.connection = !0, b.$apply(function() {}), a.path && a.sessionToken) { if (a.path.indexOf('http') == -1) { a.path = 'https://appetize.io' + a.path; } console.debug('ws', a.path); 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() } });
Appetize.io
DEMO
INFO
EMBED
API
UPLOAD
Toggle navigation
DEMO
INFO
EMBED
API
UPLOAD
@-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
Help
About
×
×