health-tracker/index.html at master · WeissDev/health-tracker · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1">
	<title>Health Tracker</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link href='http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
	<style>body{font-family:'Droid Sans',sans-serif;color:#193439;background-color:#d1f1a5;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;font-smoothing:antialiased}.header{background-color:#b4e175;border-top-left-radius:5px;border-top-right-radius:5px;text-align:center}input#search-bar{width:100%;height:2.2em;color:#777;font-size:1.1em}.bottom-spacing{margin-bottom:10px}td{padding:10px 0}#search-btn{background-color:#248e24;color:#f5f5f5}.destroy{background-color:#d14e4e;color:#fff}.fullspan,table#search-results{position:relative;width:100%}table{border-collapse:collapse}tr:nth-child(even){background:#9ac349}tr:nth-child(odd){background:#c1e678}a{color:#193439}a:hover{color:#b12d2d;text-decoration:none}footer{margin:20px 0;background-color:#7ca62a;border-bottom-right-radius:5px;border-bottom-left-radius:5px}@media only screen and (min-width:500px){#search-ui{margin:auto}input#search-bar{width:50%}}@media only screen and (min-width:650px){input#search-bar{width:330px}}</style>
</head>
<body>
	<div class="container">
		<section id="health-tracker" class="row">
			<header class="header">
				<h1 class="text-center">Health Tracker App</h1>
				<section id="search-ui">
					<input type="text" id="search-bar" class="bottom-spacing" placeholder="Search for foods and drinks..." autofocus>
					<button id="search-btn" class="btn bottom-spacing">Search</button>
					<button id="clear-btn" class="btn bottom-spacing">Clear Results</button>
				</section>
			</header>
			<section id="results" class="col-md-6">
				<h3 class="text-center">Search Results</h3>
				<table id="search-results" class="table-responsive fullspan">

				</table>
			</section>
			<section id="user-list" class="col-md-6">
				<h3 class="text-center">Selected</h3>
				<table id="user-select" class="table-responsive fullspan">

				</table>
				<section id="stats" class="text-center"></section>
				<section id="chart" class="text-center">
					<h3>Your Calorie Intake</h3>
						<h4>This Week</h4>
						<canvas id="bar-chart-weekly" width="320" height="320"></canvas>
						<h4>This Month</h4>
						<canvas id="bar-chart-monthly" width="320" height="320"></canvas>
				</section>
			</section>
		</section>


		<footer id="footer">
			<p class="text-center">Health Tracker Nutritionix API Search Application</p>
			<p class="text-center">Written by <a href="https://github.com/WeissDev">Valentin Weiss</a></p>
		</footer>


	</div>

	<!-- search results template -->
	<script type="text/template" id="search-results-template">

			<td><%= name %></td>
			<td><%= brand %></td>
			<td><%= calories %> kcal</td>
			<td><button class="add btn">Add</button></td>

	</script>

	<!-- user select template -->
	<script type="text/template" id="user-select-template">

			<td><%= name %></td>
			<td><%= brand %></td>
			<td><%= calories %> kcal</td>
			<td><button class="destroy btn">Remove</button></td>

	</script>


	<!-- food stats template -->
	<script type="text/template" id="stats-template">
		<p id="item-count"><strong> <%= remaining %> </strong> <%= remaining === 1 ? 'food item' : 'food items' %> on the list</p>
		<p class="selected">Total Calories: <%= totalCalories %> kcal</p>
	</script>

	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.2/backbone-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.1.16/backbone.localStorage-min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

	<script src="dist/js/main.min.js"></script>

</body>
</html>