-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (80 loc) · 3.79 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
<!DOCTYPE html>
<html 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, maximum-scale=1, user-scalable=no">
<title>Food</title>
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<link href="bootstrap/css/bootstrap-theme.css" rel="stylesheet" />
<link href="index.css" rel="stylesheet" />
<link href="food.css" rel="stylesheet"/>
</head>
<body>
<!--
_ _ _ _
/\ \ /\ \ /\ \ /\ \
/ \ \ / \ \ / \ \ / \ \____
/ /\ \ \ / /\ \ \ / /\ \ \ / /\ \_____\
/ / /\ \_\ / / /\ \ \ / / /\ \ \ / / /\/___ /
/ /_/_ \/_// / / \ \_\ / / / \ \_\ / / / / / /
/ /____/\ / / / / / // / / / / // / / / / /
/ /\____\/ / / / / / // / / / / // / / / / /
/ / / / / /___/ / // / /___/ / / \ \ \__/ / /
/ / / / / /____\/ // / /____\/ / \ \___\/ /
\/_/ \/_________/ \/_________/ \/_____/
-->
<main>
<div class="container-fluid">
<div class="row title">
<div class="col-xs-12">
<h1>PROTEIN IMPACT INDEX</h1>
<h3>What's for dinner?
<a id="information" href="#" class="pull-right"><span class="glyphicon glyphicon-info-sign" data-toggle="modal" data-target="#myModal"></span></a>
</h3>
</div>
</div>
<div class="food-options" data-bind="foreach: foodGrid">
<div class="row food-row">
<div data-bind="foreach: $data">
<div class="col-xs-6 food-choice" data-bind="if: $data !== null, click: click, css: { 'choice-left': $index() === 0, 'choice-right': $index() === 1 }, style: { 'background-image': 'url(' + $data.data.icon + ')' }">
<div class="food-details">
<h2 data-bind="text: $data.data.protein_common_name"></h2>
</div>
<div data-bind="if: selected" style="position: absolute; bottom: 5px; right: 5px">
<span class="glyphicon glyphicon-ok"></span>
</div>
</div>
</div>
</div>
</div>
<div class="row food-row">
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Information</h4>
</div>
<div class="modal-body">
How humans source their protein has one of the largest impacts on the environment, the global economy and overall health. Our aim is to create a user friendly, comprehensive protein guide for mobile devices, which factors in nutritional value, environmental impact and current prices to help consumers make the most informed decisions about the proteins they eat.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</main>
<aside></aside>
<script src="jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
<script src="knockout-3.1.0.debug.js"></script>
<script src="data/protein.js"></script>
<script src="index.js"></script>
<script type="text/javascript" src="build.js"></script>
</body>
</html>