52 lines
No EOL
3.1 KiB
HTML
52 lines
No EOL
3.1 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">
|
|
<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>
|
|
</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 + 1 }}/{{ timer.rounds }} - Cycle: {{ cycle + 1 }}/{{ 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>
|
|
</body>
|
|
</html> |