-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
138 lines (135 loc) · 7.97 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
<!DOCTYPE html>
<!-- This site was created in Webflow. http://www.webflow.com-->
<!-- Last Published: Fri Mar 24 2017 22:53:17 GMT+0000 (UTC) -->
<html data-wf-domain="hfb-onepaycheckaway.webflow.io" data-wf-page="58d1f1273dcf094158eb298c" data-wf-site="58cc4e15bf7c04924929b657">
<head>
<meta charset="utf-8">
<title>Shopping Cart</title>
<meta content="Shopping Cart" property="og:title">
<meta content="width=device-width, initial-scale=1" name="viewport">
<meta content="Webflow" name="generator">
<link href="https://daks2k3a4ib2z.cloudfront.net/58cc4e15bf7c04924929b657/css/hfb-onepaycheckaway.webflow.55d3f1363.css" rel="stylesheet" type="text/css">
<script src="https://daks2k3a4ib2z.cloudfront.net/0globals/modernizr-2.7.1.js" type="text/javascript"></script>
<link href="https://daks2k3a4ib2z.cloudfront.net/58cc4e15bf7c04924929b657/58d56e1c040e1af47fcdb96e_favicon.png" rel="shortcut icon" type="image/x-icon">
<link href="https://daks2k3a4ib2z.cloudfront.net/58cc4e15bf7c04924929b657/58d56e2600d24e3201072274_webclip.jpg" rel="apple-touch-icon">
</head>
<body class="gray">
<div class="loading-screen" data-ix="loading">
<div class="loading-fill">
<div class="apple-outline"></div>
</div>
</div>
<div id="v-app">
<div class="modal-wrapper refresh" v-bind:style="styles.emptyCartModal">
<div class="modal">
<h2>Empty your cart?</h2>
<p>Are you sure you want to empty your cart? This action cannot be undone.</p><a class="button empty w-button" href="#" v-on:click="emptyCart">Empty</a><a class="button green outline w-button" data-ix="close-empty-cart-modal" href="#" v-on:click="toggle('emptyCartModal')">Cancel</a></div>
</div>
<div class="modal-wrapper over-budget" v-bind:style="styles.overBudgetModal">
<div class="modal">
<h2>Oh no! You're going over your budget!</h2>
<p>Remove an item to get your budget back in the green.</p><a class="button solid w-button" data-ix="close-empty-cart-modal" href="#" v-on:click="toggle('overBudgetModal')">Got it</a></div>
</div>
<div class="background w-clearfix">
<div class="top">
<div class="top-flex">
<a class="logo-mobile w-inline-block" href="/"><img src="http://uploads.webflow.com/58cc4e15bf7c04924929b657/58cc4e15bf7c04924929b681_hfb-logo.jpg" width="106"></a>
<div class="tracker">
<div class="red tracker-amount" v-bind:class="{ green: calorieGoalMet }" v-text="decimal(adjustedTotalCalories) + ' calories'">570 calories</div>
<div class="divider tracker-amount">/</div>
<div class="green tracker-amount" v-text="currency(adjustedBudget)">$98.26</div>
</div><img class="logo" src="http://uploads.webflow.com/58cc4e15bf7c04924929b657/58cc4e15bf7c04924929b682_opa-logo.jpg" width="101"></div>
<a class="cart-button w-inline-block" data-ix="mobile-cart-menu" href="#"></a>
</div>
<div class="list w-clearfix">
<div class="list-tabs w-tabs" data-duration-in="300" data-duration-out="100">
<div class="list-tabs-menu w-tab-menu">
<a class="list-tab-link w--current w-inline-block w-tab-link" data-w-tab="Fruit" v-bind:class="isCurrent(groupIndex)" v-for="(groupName, groupIndex) in groupNames" v-on:click="selectTab(groupIndex)">
<div v-text="groupName">Fruit</div>
</a>
</div>
<div class="list-tabs-content w-tab-content">
<div class="list-tab-pane w--tab-active w-tab-pane" data-w-tab="Fruit" v-bind:class="isActive(groupIndex)" v-for="(groupName, groupIndex) in groupNames">
<div class="list-item-block w-clearfix" v-for="(item, itemIndex) in groupedGroceryList[groupName]">
<div class="list-item-name" v-text="item.name">Apples (3)</div>
<div class="list-item-details">
<div v-text="decimal(item.calories) + ' calories'">285 calories</div>
</div>
<div class="list-item-details">
<div v-text="item.servings">3 servings</div>
</div>
<div class="list-item-details">
<div v-text="currency(item.price)">$1.37</div>
</div>
<div class="disclaimer" v-if="item.nonNutritious">* These calories are non-nutritious.</div>
<div class="quantity">
<div class="quantity-flex w-clearfix">
<a class="w-inline-block" href="#" v-on:click="removeItem(item)"><img src="http://uploads.webflow.com/58cc4e15bf7c04924929b657/58cc4e15bf7c04924929b664_less-disabled.png" width="32"></a>
<div class="quantity-amount">
<div v-text="item.quantity">2</div>
</div>
<a class="w-inline-block" href="#" v-on:click="addItem(item)"><img src="http://uploads.webflow.com/58cc4e15bf7c04924929b657/58cc4e15bf7c04924929b663_more.png" width="32"></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="cart">
<div class="cart-overflow">
<div class="cart-heading">
<div class="my-shopping-cart">My shopping cart</div>
<div class="bold">Your family has <span v-text="currency(budget)">$101</span> to spend on <span v-text="decimal(totalCalories)">60,550</span> calories</div>
<div>Nutritious calories: <span v-text="decimal(nutritiousCalories)">570</span></div>
<div>Non-nutritious calories: <span v-text="decimal(nonNutritiousCalories)">0</span></div>
</div>
<div class="full-cart" v-show="!cartIsEmpty">
<div class="cart-title w-clearfix">
<div class="quantity-title">
<div>QTY</div>
</div>
<div class="item-title">
<div>ITEM</div>
</div>
<div class="cart-right">
<div class="item-price">
<div>PRICE</div>
</div>
</div>
</div>
<div class="cart-item w-clearfix" v-for="item in selectedItems">
<div class="cart-quantity">
<div v-text="item.quantity">2</div>
</div>
<div class="cart-item-block">
<div class="cart-details">
<div class="cart-item-name" v-text="item.name">Apples (3)</div>
</div>
<div class="cart-details">
<div v-text="decimal(item.calories * item.quantity) + ' calories'">570 calories</div>
<div v-text="currency(item.price * item.quantity)">$2.74</div>
</div>
<div class="remove"><a class="remove-link" href="#" v-on:click="removeAllOfItem(item)">remove</a></div>
</div>
</div>
<div class="cart-action">
<div class="cart-total-block">
<div class="cart-total">Total</div>
<div class="cart-total-amount">
<div v-text="currency(cartTotalPrice)">$2.74</div>
</div>
</div><a class="button margin-bottom outline w-button" data-ix="show-empty-cart-modal" href="#" v-on:click="toggle('emptyCartModal')">Empty cart</a></div>
</div>
<div class="empty-cart" v-show="cartIsEmpty"><img class="cart-icon" src="http://uploads.webflow.com/58cc4e15bf7c04924929b657/58cc4e15bf7c04924929b67e_shopping-cart.png" width="71">
<div>You haven't selected any groceries yet!</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js" type="text/javascript"></script>
<script src="https://daks2k3a4ib2z.cloudfront.net/58cc4e15bf7c04924929b657/js/webflow.ea8ef77df.js" type="text/javascript"></script>
<!--[if lte IE 9]><script src="//cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
</body>
</html>