90 lines
5.4 KiB
HTML
90 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<html ng-app="interval-timer">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="css/styles.css">
|
|
<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
|
|
<link rel="stylesheet" type="text/css" href="css/addtohomescreen.css">
|
|
<script type="text/javascript" src="js/addtohomescreen.min.js"></script>
|
|
<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/app.js"></script>
|
|
<script>
|
|
angular.element(document).ready(function () {
|
|
addToHomescreen({
|
|
startDelay: 1,
|
|
maxDisplayCount: 100
|
|
});
|
|
});
|
|
</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">
|
|
</head>
|
|
<body ng-controller="timerCtrl as timer" ng-class="{'green': lowIntensity, 'red': highIntensity, 'blue': coolDown, 'yellow': warmUp }">
|
|
<div class="menu-top">
|
|
<a href="#" id="timer-name" class="menu-button">{{ timer.name }}<!-- <i class="fa fa-angle-down"></i> --></a>
|
|
</div>
|
|
<div class="timer-box">
|
|
<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 class="timer-controls">
|
|
<a id="back" ng-click="stepBack()" class="control-button" href="#"><i class="fa fa-step-backward"></i></a>
|
|
<a id="play" ng-hide="timerActive" ng-click="startTimer()" class="control-button" href="#"><i class="fa fa-play"></i></a>
|
|
<a id="pause" ng-show="timerActive" ng-click="pauseTimer()" class="control-button" href="#"><i class="fa fa-pause"></i></a>
|
|
<a id="next" ng-click="stepForward()" class="control-button" href="#"><i class="fa fa-step-forward"></i></a>
|
|
</div>
|
|
</div>
|
|
<div class="menu-bottom">
|
|
<a href="#" ng-click="settingsOpen = true; closeSettings = false;" id="timer-menu-btn" class="menu-button"><i class="fa fa-hourglass-o"></i></a>
|
|
<a id="timer-reset-btn" ng-click="resetTimer()" href="#" class="menu-button"><i class="fa fa-refresh"></i></a>
|
|
</div>
|
|
<div ng-class="{ 'slideIn': settingsOpen, 'slideOut': closeSettings }" class="settings-menu">
|
|
<form id="timer-setup" name="timer-setup">
|
|
<label>Timer Name:</label>
|
|
<input type="text" ng-model="timer.name">
|
|
<label>Warm Up:</label>
|
|
<input type="number" ng-model="timer.warmUpTime">
|
|
<label>Low Intensity:</label>
|
|
<input type="number" ng-model="timer.lowIntensityTime">
|
|
<label>High Intensity:</label>
|
|
<input type="number" ng-model="timer.highIntensityTime">
|
|
<label>Cool Down:</label>
|
|
<input type="number" ng-model="timer.coolDownTime">
|
|
<label>Rounds:</label>
|
|
<input type="number" ng-model="timer.rounds">
|
|
<label>Cycles:</label>
|
|
<input type="number" ng-model="timer.cycles">
|
|
<a class="form-button" id="save" ng-click="settingsOpen = false; closeSettings = true; time = warmUpTime; resetTimer(); saveTimer()" href="#"> Save Changes</a>
|
|
</form>
|
|
</div>
|
|
<script>
|
|
if('serviceWorker' in navigator) {
|
|
navigator.serviceWorker
|
|
.register('/sw.js')
|
|
.then(function() { console.log("Service Worker Registered"); });
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|