William Brawner
0781ff6c31
It doesn't seem to be used anywhere so it seems like it can just go. Anything it would have been used for seems like it should have been handled with Angular anyways.
185 lines
11 KiB
HTML
185 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">
|
|
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.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>
|
|
<div class="hamburger-icon" ng-click="settingsOpen = true; closeSettings = false;">
|
|
<span></span>
|
|
<span id="middle"></span>
|
|
<span></span>
|
|
</div>
|
|
<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="#"><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>
|
|
</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"><i class="fa fa-question-circle"></i>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>
|