-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
143 lines (120 loc) · 6.16 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!doctype html>
<html ng-app="coffeescale" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CoffeeScale</title>
<link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
<link rel="icon" type="image/png" href="favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="favicon/manifest.json">
<link rel="mask-icon" href="favicon/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#211608">
<script src="js/angular.min.js"></script>
<script src="js/coffeescale.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap-theme.min.css">
<link rel="stylesheet" type="text/css" href="css/coffeeStyle.css">
</head>
<body ng-cloak>
<div ng-controller="CoffeeController as coffeeController" class="container panel panel-default grey">
<!-- header and description-->
<div class="row panel-heading">
<div class="col-xs-12">
<button type="button" class="btn btn-info btn-lg pull-right" data-toggle="modal" data-target="#modalDescription"><span class="glyphicon glyphicon-question-sign pull-right"></span></button>
<h1>CoffeeScale</h1>
<!-- Modal -->
<div class="modal fade" id="modalDescription" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Description</h4>
</div>
<div class="modal-body">
<p>Enter the amount of coffee grind you want to use. The correct amount of water is displayed. You can select different types of coffee, and they have different coffee-to-water ratios.</p>
<div ng-repeat="coffeeType in coffeeController.coffeeTypes" class="coffeeDescription">
<h2>{{coffeeType.name}}</h2>
<span ng-bind-html="coffeeType.description | sanitize"></span>
<!--<p>{{coffeeType.description}}</p>-->
</div>
</div>
<!--
<div class="modal-footer">
<p>hello world</p>
</div>
-->
</div>
</div>
</div>
</div>
</div>
<!-- servings input -->
<div class="row info panel-body vertical-align">
<div class="col-xs-5 col-sm-3 col-lg-1 info-addon">
<span>Servings</span>
</div>
<div class="col-xs-4 col-sm-2 col-lg-3 info-value">
<span>{{coffeeController.getServings()}} cups</span>
</div>
<div class="col-xs-3 col-sm-2 col-lg-1 info-button-group btn-group-vertical" data-toggle="tooltip" data-trigger="hover focus" title="Adjust amount of servings.">
<button ng-click="coffeeController.addToServings(1)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-up"></span></button>
<button ng-click="coffeeController.addToServings(-1)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<!-- coffee input -->
<div class="row info panel-body vertical-align">
<div class="col-xs-4 col-sm-3 col-lg-1 info-addon">
<span>Coffee</span>
</div>
<div class="col-xs-5 col-sm-2 col-lg-3 info-value">
<span>{{coffeeController.coffeeWeight}} g</span>
</div>
<div class="col-xs-3 col-sm-2 col-lg-1 info-button-group btn-group-vertical" data-toggle="tooltip" data-trigger="hover focus" title="Adjust amount of coffee in grams.">
<button ng-click="coffeeController.addToCoffeeWeight(1)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-up"></span></button>
<button ng-click="coffeeController.addToCoffeeWeight(-1)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<!-- water input -->
<div class="row info panel-body vertical-align">
<div class="col-xs-4 col-sm-3 col-lg-1 info-addon">
<span>Water</span>
</div>
<div class="col-xs-5 col-sm-2 col-lg-3 info-value">
<span>{{coffeeController.getWaterWeight()}} g</span>
</div>
<div class="col-xs-3 col-sm-2 col-lg-1 info-button-group btn-group-vertical" data-toggle="tooltip" data-trigger="hover focus" title="Adjust amount of water in grams.">
<button ng-click="coffeeController.addToCoffeeWeight(10)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-up"></span></button>
<button ng-click="coffeeController.addToCoffeeWeight(-10)" class="btn btn-primary"><span class="glyphicon glyphicon-chevron-down"></span></button>
</div>
</div>
<!-- timer -->
<div class="row info panel-body vertical-align">
<div class="col-xs-4 col-sm-3 col-lg-1 info-addon">
<span>Timer</span>
</div>
<div class="col-xs-5 col-sm-2 col-lg-3 info-value">
<span>{{countDown | secondsToDateTime | date:'mm:ss'}}</span>
</div>
<div class="col-xs-3 col-sm-2 col-lg-1 info-button-group btn-group btn-group-sm">
<button ng-click="startTimer()" class="btn btn-primary timer-button"><span class="glyphicon glyphicon-play"></span></button>
<!--<button ng-click="pauseTimer()" class="btn btn-primary"><span class="glyphicon glyphicon-pause"></span></button>-->
<button ng-click="resetTimer()" class="btn btn-primary timer-button"><span class="glyphicon glyphicon-refresh"></span></button>
</div>
</div>
<!-- coffee type selector buttons -->
<div class="row info panel-body vertical-align">
<!-- no columns; to get centered buttons -->
<div class="btn-group center-block">
<button ng-repeat="coffeeType in coffeeController.coffeeTypes" ng-click="coffeeController.selectCoffeeType(coffeeType)" ng-class="{ active: coffeeController.coffeeTypeIsSelected(coffeeType)}" class="btn btn-primary">{{coffeeType.name}}</button>
</div>
</div>
</div>
<!-- Tooltipery -->
<script>$(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();});</script>
</body>
</html>