182 lines
11 KiB
HTML
182 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="interval-timer">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<meta http-equiv="origin-trial" content="AloaghywgheoF88lzr+tXh8sYHKDmcUK99BMmxF+X/Pxfa6HFXIeaGzErWIpUK3QccLF0NLA9Tt7oqZlW7e9cwsAAABceyJvcmlnaW4iOiJodHRwczovL2ludGVydmFsLXRpbWVyLmJyYXduZXIuZGV2OjQ0MyIsImZlYXR1cmUiOiJXYWtlTG9jayIsImV4cGlyeSI6MTU5Mjc3OTIwNH0=">
|
|
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
|
<script type="text/javascript" src="js/angular.min.js"></script>
|
|
<script type="text/javascript" src="js/angular-cookies.min.js"></script>
|
|
<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>
|
|
<script type="text/javascript" src="js/app.js"></script>
|
|
<title>Interval Timer</title>
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/img/apple-touch-icon-180x180.png">
|
|
<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">
|
|
<link rel="shortcut icon" type="image/png" href="/img/android-chrome-192x192.png" sizes="192x192">
|
|
<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">
|
|
<link rel="icon" href="/img/favicon.ico">
|
|
<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">
|
|
<script>
|
|
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
|
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
|
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
|
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
|
|
|
|
ga('create', 'UA-69342914-2', 'auto');
|
|
ga('send', 'pageview');
|
|
|
|
</script>
|
|
</head>
|
|
<body ng-controller="timerCtrl as timer">
|
|
<header>
|
|
<a href="#" class="hamburger-icon" ng-click="settingsOpen = true; closeSettings = false;">
|
|
<img class="button menu-icon" src="img/menu.svg" />
|
|
</a>
|
|
<h1>Interval Timer</h1>
|
|
</header>
|
|
<div class="timers">
|
|
<img class="loader" src="img/spinner.png" ng-hide="timersLoaded" />
|
|
<div class="loader-overlay" ng-hide="timersLoaded"></div>
|
|
<div class="no-timers" ng-hide="noTimers">
|
|
<h3>It looks like you haven't configured any timers yet. Click on the orange "+" icon below to get started!</h3>
|
|
</div>
|
|
<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>
|
|
</div>
|
|
</div>
|
|
<div class="timer-interface" ng-class="{ 'visible': showTimerInterface, 'white': warmUp.active, 'yellow': rest.active, 'green': lowIntensity.active, 'blue': coolDown.active, 'red': highIntensity.active }">
|
|
<div class="timer-container">
|
|
<div class="timer-top">
|
|
<a href="#" ng-click="closeTimer()" id="timer-menu-btn" class="menu-button">✕</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="#"><img class="timer-control play" src="./img/skip-back.svg" /></a>
|
|
<a id="play" ng-hide="timerActive" ng-click="startTimer()" class="menu-button" href="#"><img class="timer-control play" src="./img/play.svg" /></a>
|
|
<a id="pause" ng-show="timerActive" ng-click="pauseTimer()" class="menu-button" href="#"><img class="timer-control pause" src="./img/pause.svg" /></a>
|
|
<a id="next" ng-click="stepForward()" class="menu-button" href="#"><img class="timer-control play" src="./img/skip-forward.svg" /></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div ng-class="{ 'opaque': settingsOpen, '': closeSettings }" class="settings-menu-overlay" ng-click="settingsOpen = false; closeSettings = true;" ></div>
|
|
<div ng-class="{ 'slideIn': settingsOpen, 'slideOut': closeSettings }" class="settings-menu">
|
|
<img src="./img/menu-logo.png" />
|
|
<div class="fixed bottom">
|
|
<a href="https://wbrawner.com/contact/" target="_blank"><span class="question-circle">?</span>Help & feedback</a>
|
|
</div>
|
|
</div>
|
|
<div class="new-timer" ng-class="{ 'slideUp': newTimerOpen, 'slideDown': newTimerClosed }">
|
|
<div class="top-menu">
|
|
<a class="menu-button" href="javascript:void(0)" ng-click="closeNewTimer()">✕</a>
|
|
<a class="menu-button" href="javascript:void(0)" ng-click="saveNewTimer()">✓</a>
|
|
</div>
|
|
<form id="timer-setup" name="timer-setup">
|
|
<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">
|
|
<select class="min" ng-model="newTimer.lowIntensity.min" ng-options="number for number in getNumberRange(60)">
|
|
<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>
|
|
</form>
|
|
</div>
|
|
<button class="add-timer" ng-click="openNewTimer()">+</button>
|
|
<script>
|
|
if('serviceWorker' in navigator) {
|
|
navigator.serviceWorker
|
|
.register('/sw.js')
|
|
.then(function() { console.log("Service Worker Registered"); });
|
|
}
|
|
angular.element(window).bind('orientationchange', function (e) {
|
|
console.log(e) ;
|
|
});
|
|
</script>
|
|
</body>
|
|
</html>
|