2015-11-19 15:15:33 +00:00
<!DOCTYPE html>
2015-11-21 21:00:34 +00:00
< html ng-app = "interval-timer" >
2015-11-19 15:15:33 +00:00
< head >
< meta charset = "UTF-8" / >
2015-11-21 21:00:34 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1" >
2015-11-19 15:15:33 +00:00
< link rel = "stylesheet" type = "text/css" href = "css/styles.css" >
< link rel = "stylesheet" type = "text/css" href = "css/font-awesome.min.css" >
2016-09-17 19:32:55 +00:00
< link rel = "stylesheet" type = "text/css" href = "css/addtohomescreen.css" >
< script type = "text/javascript" src = "js/addtohomescreen.min.js" > < / script >
2016-09-18 09:04:10 +00:00
< script type = "text/javascript" src = "js/jquery-3.1.0.js" > < / script >
2015-11-19 15:15:33 +00:00
< script type = "text/javascript" src = "js/angular.min.js" > < / script >
2015-11-22 02:22:35 +00:00
< script type = "text/javascript" src = "js/angular-cookies.min.js" > < / script >
2016-09-18 09:04:10 +00:00
< script type = "text/javascript" src = "js/item-swipe.js" > < / script >
< script type = "text/javascript" src = "js/angular-animate.min.js" > < / script >
< script type = "text/javascript" src = "js/angular-touch.min.js" > < / script >
< script type = "text/javascript" src = "js/angular-indexed-db.min.js" > < / script >
2015-11-21 21:00:34 +00:00
< script type = "text/javascript" src = "js/app.js" > < / script >
2016-09-17 19:32:55 +00:00
< script >
angular.element(document).ready(function () {
addToHomescreen({
startDelay: 1,
maxDisplayCount: 100
});
});
< / script >
< title > Interval Timer< / title >
2016-09-17 20:32:24 +00:00
< link rel = "apple-touch-icon" sizes = "180x180" href = "/img/apple-touch-icon-180x180.png" >
2016-09-17 19:32:55 +00:00
< link rel = "apple-touch-icon" sizes = "57x57" href = "/img/apple-touch-icon-57x57.png" >
< link rel = "apple-touch-icon" sizes = "60x60" href = "/img/apple-touch-icon-60x60.png" >
< link rel = "apple-touch-icon" sizes = "72x72" href = "/img/apple-touch-icon-72x72.png" >
< link rel = "apple-touch-icon" sizes = "76x76" href = "/img/apple-touch-icon-76x76.png" >
< link rel = "apple-touch-icon" sizes = "114x114" href = "/img/apple-touch-icon-114x114.png" >
< link rel = "apple-touch-icon" sizes = "120x120" href = "/img/apple-touch-icon-120x120.png" >
< link rel = "apple-touch-icon" sizes = "144x144" href = "/img/apple-touch-icon-144x144.png" >
< link rel = "apple-touch-icon" sizes = "152x152" href = "/img/apple-touch-icon-152x152.png" >
< link rel = "icon" type = "image/png" href = "/img/favicon-32x32.png" sizes = "32x32" >
< link rel = "icon" type = "image/png" href = "/img/favicon-194x194.png" sizes = "194x194" >
2016-09-17 20:32:24 +00:00
< link rel = "shortcut icon" type = "image/png" href = "/img/android-chrome-192x192.png" sizes = "192x192" >
2016-09-17 19:32:55 +00:00
< link rel = "icon" type = "image/png" href = "/img/favicon-16x16.png" sizes = "16x16" >
< link rel = "manifest" href = "/img/manifest.json" >
< link rel = "mask-icon" href = "/img/safari-pinned-tab.svg" color = "#ffeb3b" >
2016-09-17 20:32:24 +00:00
< link rel = "icon" href = "/img/favicon.ico" >
2016-09-17 19:32:55 +00:00
< meta name = "msapplication-TileColor" content = "#ffc40d" >
< meta name = "msapplication-TileImage" content = "/img/mstile-144x144.png" >
< meta name = "msapplication-config" content = "/img/browserconfig.xml" >
< meta name = "theme-color" content = "#ffeb3b" >
2015-11-19 15:15:33 +00:00
< / head >
2016-09-17 23:32:22 +00:00
< body ng-controller = "timerCtrl as timer" >
< header >
< div class = "hamburger-icon" ng-click = "settingsOpen = true; closeSettings = false;" >
< span > < / span >
< span id = "middle" > < / span >
< span > < / span >
< / div >
< h1 > Interval Timer< / h1 >
< / header >
2016-09-18 09:04:10 +00:00
< div class = "timers" >
< img class = "loader" src = "img/spinner.png" ng-hide = "timersLoaded" / >
2016-09-18 20:16:18 +00:00
< div class = "loader-overlay" ng-hide = "timersLoaded" > < / div >
< div class = "no-timers" ng-hide = "noTimers" >
2016-09-18 09:04:10 +00:00
< h3 > It looks like you haven't configured any timers yet. Click on the orange "+" icon below to get started!< / h3 >
2015-11-19 15:15:33 +00:00
< / div >
2016-09-18 09:04:10 +00:00
< div class = "timer animate-repeat" ng-repeat = "timerInstance in getTimers()" item-swipe = "" on-remove = "deleteTimer(timerInstance)" ng-class = "{'removed': timerInstance.removed}" >
< a href = "javascript:void(0)" ng-click = "openTimer(timerInstance.id)" >
< h2 > {{ timerInstance.name }}< / h2 >
< p > {{ timerInstance.description }}< / p >
< / a >
2015-11-19 15:15:33 +00:00
< / div >
< / div >
2016-09-18 20:29:25 +00:00
< div class = "timer-interface" ng-class = "{ 'visible': showTimerInterface, 'white': warmUp.active, 'yellow': rest.active, 'green': lowIntensity.active, 'blue': coolDown.active, 'red': highIntensity.active }" >
2016-09-18 09:04:10 +00:00
< div class = "timer-container" >
< div class = "timer-top" >
< a href = "#" ng-click = "closeTimer()" id = "timer-menu-btn" class = "menu-button" > & #10005< / a >
< h2 id = "timer-name" > {{ timer.name }}< / h2 >
< a id = "timer-reset-btn" ng-click = "resetTimer()" href = "#" class = "menu-button" > < i class = "fa fa-refresh" > < / i > < / a >
< / div >
< div class = "timer-middle" >
< div class = "timer-info" >
< p class = "time-info" > Round: {{ round }}/{{ timer.rounds }} - Cycle: {{ cycle }}/{{ timer.cycles }}< / p >
< p class = "time" > {{ time * 1000 | date : "mm:ss" }}< / p >
< / div >
< / div >
< div class = "timer-bottom" >
< a id = "back" ng-click = "stepBack()" class = "menu-button" href = "#" > < i class = "fa fa-step-backward" > < / i > < / a >
< a id = "play" ng-hide = "timerActive" ng-click = "startTimer()" class = "menu-button" href = "#" > < i class = "fa fa-play" > < / i > < / a >
< a id = "pause" ng-show = "timerActive" ng-click = "pauseTimer()" class = "menu-button" href = "#" > < i class = "fa fa-pause" > < / i > < / a >
< a id = "next" ng-click = "stepForward()" class = "menu-button" href = "#" > < i class = "fa fa-step-forward" > < / i > < / a >
< / div >
< / div >
2015-11-21 21:00:34 +00:00
< / div >
2016-09-18 20:29:25 +00:00
< div ng-class = "{ 'opaque': settingsOpen, '': closeSettings }" class = "settings-menu-overlay" ng-click = "settingsOpen = false; closeSettings = true;" > < / div >
2015-11-22 01:20:19 +00:00
< div ng-class = "{ 'slideIn': settingsOpen, 'slideOut': closeSettings }" class = "settings-menu" >
2016-09-18 09:04:10 +00:00
< img src = "./img/menu-logo.png" / >
2016-09-17 23:32:22 +00:00
< div class = "fixed bottom" >
< a href = "https://wbrawner.com/contact/" target = "_blank" > < i class = "fa fa-question-circle" > < / i > Help & feedback< / a >
< / div >
< / div >
2016-09-18 09:04:10 +00:00
< div class = "new-timer" ng-class = "{ 'slideUp': newTimerOpen, 'slideDown': newTimerClosed }" >
2016-09-17 23:32:22 +00:00
< div class = "top-menu" >
2016-09-18 09:04:10 +00:00
< a class = "menu-button" href = "javascript:void(0)" ng-click = "closeNewTimer()" > ✕ < / a >
< a class = "menu-button" href = "javascript:void(0)" ng-click = "saveNewTimer()" > ✓ < / a >
2016-09-17 23:32:22 +00:00
< / div >
2015-11-21 21:00:34 +00:00
< form id = "timer-setup" name = "timer-setup" >
2016-09-18 09:04:10 +00:00
< div class = "input-wrapper" >
< input type = "text" ng-model = "newTimer.name" placeholder = "Name" >
< / div >
< div class = "input-wrapper" >
< textarea ng-model = "newTimer.description" placeholder = "Description" > < / textarea >
< / div >
< div class = "select-wrapper" >
< select class = "min" ng-model = "newTimer.warmUp.min" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > Warm-up Min< / option >
< / select >
< span style = "width: 2%;" >
:
< / span >
< select class = "sec" ng-model = "newTimer.warmUp.sec" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > Warm-up Sec< / option >
< / select >
< / div >
< div class = "select-wrapper" >
2016-09-23 20:32:59 +00:00
< select class = "min" ng-model = "newTimer.lowIntensity.min" ng-options = "number for number in getNumberRange(60)" >
2016-09-18 09:04:10 +00:00
< option value = "" disabled selected > Low-intensity Min< / option >
< / select >
< span style = "width: 2%;" >
:
< / span >
< select class = "sec" ng-model = "newTimer.lowIntensity.sec" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > Low-intensity Sec< / option >
< / select >
< / div >
< div class = "select-wrapper" >
< select class = "min" ng-model = "newTimer.highIntensity.min" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > High-intensity Min< / option >
< / select >
< span style = "width: 2%;" >
:
< / span >
< select class = "sec" ng-model = "newTimer.highIntensity.sec" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > High-intensity Sec< / option >
< / select >
< / div >
< div class = "select-wrapper" >
< select class = "min" ng-model = "newTimer.rest.min" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > Rest Min< / option >
< / select >
< span style = "width: 2%;" >
:
< / span >
< select class = "sec" ng-model = "newTimer.rest.sec" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > Rest Sec< / option >
< / select >
< / div >
< div class = "select-wrapper" >
< select class = "min" ng-model = "newTimer.coolDown.min" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > CoolDown Min< / option >
< / select >
< span style = "width: 2%;" >
:
< / span >
< select class = "sec" ng-model = "newTimer.coolDown.sec" ng-options = "number for number in getNumberRange(60)" >
< option value = "" disabled selected > CoolDown Sec< / option >
< / select >
< / div >
< div class = "input-wrapper" >
< input type = "number" ng-model = "newTimer.rounds" placeholder = "Rounds" >
< / div >
< div class = "input-wrapper" >
< input type = "number" ng-model = "newTimer.cycles" placeholder = "Cycles" >
< / div >
2015-11-21 21:00:34 +00:00
< / form >
< / div >
2016-09-18 09:04:10 +00:00
< button class = "add-timer" ng-click = "openNewTimer()" > +< / button >
2016-09-17 20:32:24 +00:00
< script >
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/sw.js')
.then(function() { console.log("Service Worker Registered"); });
}
2016-09-17 23:32:22 +00:00
angular.element(window).bind('orientationchange', function (e) {
console.log(e) ;
});
2016-09-17 20:32:24 +00:00
< / script >
2015-11-19 15:15:33 +00:00
< / body >
2016-09-17 19:32:55 +00:00
< / html >
