/
index.html
98 lines (97 loc) · 4.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inside the Bag</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<section class="section" style="background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed;
background-size: cover;">
<div class="card" style="opacity: 70%;">
<div class="card-content">
<h1 class="title is-1 has-text-centered"><strong>Inside the Bag</strong></h1>
</div>
</div>
<div class="box has-background-primary" style="opacity: 95%; height: 500px;">
<div class="media" style="margin-left: 7%;">
<div class="column has-text-centered">
<p>
<strong class="subtitle is-3">How Healthy is Your Food?</strong>
<br>
Enter in your grocery items!
</p>
<div class="field">
<!-- <label class="label">Grocery Item</label> -->
<!-- <div class="control"> -->
<input class="input" type="text" placeholder="Type here" id="item" size="5">
<!-- </div> -->
</div>
<div class="field is-grouped" style="margin-left: 35%;">
<div class="alter control">
<button class="addButton button is-link">Add</button>
</div>
<div class="control">
<button class="doneButton button is-link is-light">Done</button>
</div>
</div>
</div>
<div class="column">
<div class="tables" style="opacity: 95%;">
<p> To see how healthy your food is, enter each of your grocery items in the input box. Press the "Add" button and your item will appear in the list. When you have all your
items in the list, press the "Done" button to total up all the health benefits your groceries had.
</p>
<br>
</div>
</div>
</div>
</div>
<div class="box has-background-info" style="opacity: 95%;">
<div class="media has-text-centered" style="text-align: center; margin-left:25%">
<div class="content has-text-centered">
<p>
<strong class="subtitle is-3 has-text-centered">Totals</strong>
<div class="columns has-text-centered is-3">
<div class="column is-3">
<div class=box>
<span class="material-icons">emoji_events</span>
<div class="subtitle is-6">NOVA Score</div>
<div class="nova_total"></div>
</div>
<!-- <br> -->
</div><div class="column is-3">
<div class=box>
<span class="material-icons">star</span>
<div class="subtitle is-6">Nutrition Score</div>
<div class="nut_total"></div>
</div>
<!-- <br> -->
</div><div class="column is-3">
<div class=box>
<span class="material-icons">battery_charging_full</span>
<div class="subtitle is-6">Energy Amount</div>
<div class="energy_total"></div>
</div>
<!-- <br> -->
</div><div class="column is-3">
<div class=box>
<span class="material-icons">cloud</span>
<div class="subtitle is-6">Carbon Footprint</div>
<div class="carbon_total"></div>
</div>
</div>
<div class="column"></div>
</div>
<!-- NOVA sc, nutrition score, energy, carbon -->
</p>
</div>
</div>
</div>
</section>
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="final_data_50.js"></script>
<script src="render.js"></script>
</body>
</html>