interval-timer/index.html

73 lines
No EOL
4.9 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="apple-touch-icon" sizes="57x57" href="images/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="images/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="images/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="images/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="images/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="images/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="images/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="images/favicon-194x194.png" sizes="194x194">
<link rel="icon" type="image/png" href="images/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="images/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="images/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="images/manifest.json">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="images/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="images/mstile-144x144.png">
<meta name="msapplication-config" content="images/browserconfig.xml">
<meta name="theme-color" content="#ffff00">
<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 }}/{{ 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>
</body>
</html>