-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathrecipe-details.html
218 lines (201 loc) · 17.6 KB
/
recipe-details.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
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="icon" type="image/png" href="assets/img/green-meals-favicon.png" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Merienda:wght@400;700&family=Montserrat:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="assets/css/styles.css" />
<title>Green Meals | Recipe details</title>
</head>
<body class="vh-100 m-0 p-0 d-flex flex-column">
<header>
<nav class="navbar justify-content-around py-0">
<a class="navbar-brand" href="index.html">
<img src="assets/img/green-meals-logo.svg" alt="Green meals logo" width="125" height="60" />
</a>
<div>
<ul class="navbar-nav flex-row align-items-center mb-lg-0">
<li class="nav-item me-3">
<a class="nav-link active" href="recipe-randomizer.html">
<svg id="Line-Expand" enable-background="new 0 0 64 64" height="40" viewBox="0 0 64 64" width="40" xmlns="http://www.w3.org/2000/svg">
<path d="m59.091 50h-56.091c-.552 0-1 .448-1 1v4c0 3.86 3.14 7 7 7h30c3.86 0 7-3.14 7-7v-3h3.13c.416 1.756 1.891 3.097 3.768 3.268l5.93.539c.087.008.175.012.262.012.722 0 1.425-.27 1.962-.76.602-.551.948-1.334.948-2.15 0-1.604-1.305-2.909-2.909-2.909zm-15.091 5c0 2.757-2.243 5-5 5h-30c-2.757 0-5-2.243-5-5v-3h40zm15.704-1.419c-.19.174-.435.26-.695.233l-5.93-.539c-.829-.075-1.514-.575-1.852-1.275h7.864c.501 0 .909.408.909.909 0 .259-.105.498-.296.672z" />
<path d="m11 16c.792 0 1.471-.12 2.049-.309l-.998 2.992c-.102.305-.05.64.138.901.188.262.49.416.811.416h10c.321 0 .623-.154.811-.416.188-.261.239-.596.138-.901l-.998-2.992c.578.189 1.257.309 2.049.309 2.405 0 5-2.294 5-6 0-3.853-3.755-8-12-8s-12 4.147-12 8c0 3.706 2.595 6 5 6zm7-12c7.91 0 10 3.925 10 6 0 2.471-1.557 4-3 4-2.298 0-3.08-1.401-3.105-1.447-.235-.47-.792-.678-1.277-.477s-.732.742-.566 1.24l1.561 4.684h-7.226l1.562-4.684c.164-.492-.08-1.021-.556-1.227-.476-.207-1.035-.006-1.281.45-.032.06-.814 1.461-3.112 1.461-1.443 0-3-1.529-3-4 0-2.075 2.09-6 10-6z" />
<path d="m32.586 30.099-4.243 4.244c-1.511 1.511-2.343 3.52-2.343 5.657s.832 4.146 2.343 5.657 3.52 2.343 5.657 2.343 4.146-.832 5.657-2.343l9.899-9.899c3.899-3.899 3.899-10.243 0-14.142s-10.244-3.898-14.142 0c-2.235 2.234-3.271 5.371-2.828 8.483zm2.054.149c-.52-2.629.298-5.328 2.188-7.218 3.12-3.119 8.194-3.119 11.314 0 3.119 3.119 3.119 8.195 0 11.314l-9.899 9.899c-1.134 1.133-2.64 1.757-4.243 1.757s-3.109-.624-4.243-1.757-1.757-2.64-1.757-4.243.624-3.109 1.757-4.243l4.608-4.609c.237-.235.34-.573.275-.9z" />
<path d="m43.192 29.565c.801 0 1.555-.312 2.121-.878.567-.567.879-1.32.879-2.122s-.312-1.555-.878-2.121 0 0 0 0c-1.133-1.133-3.109-1.133-4.242 0-.567.567-.879 1.32-.879 2.122s.312 1.555.878 2.121c.567.566 1.32.878 2.121.878zm-.706-3.707c.188-.189.439-.293.707-.293s.518.104.707.293c.189.188.293.439.293.707s-.104.518-.293.707c-.377.378-1.036.378-1.414 0-.189-.188-.293-.439-.293-.707s.103-.518.293-.707z" />
<path d="m46 4v-2c-5.514 0-10 4.486-10 10h2c0-4.411 3.589-8 8-8z" />
<path d="m7 23h2c0-3.309-2.691-6-6-6v2c2.206 0 4 1.794 4 4z" />
<path d="m26 26h2c0-2.757 2.243-5 5-5v-2c-3.86 0-7 3.14-7 7z" />
<path d="m48 2h2v2h-2z" />
<path d="m42 46h2v2h-2z" />
<path d="m3.464 43.878c.944.945 2.2 1.465 3.536 1.465s2.591-.52 3.536-1.465c.203-.203.388-.431.562-.689.973-.108 1.872-.509 2.624-1.136l3.82 4.587c.18.216.442.346.723.359.015.001.03.001.045.001.265 0 .519-.105.707-.293l5.66-5.66c.199-.199.305-.472.292-.752-.013-.281-.143-.543-.358-.723l-4.584-3.825c.625-.752 1.026-1.65 1.132-2.62.259-.173.487-.359.69-.562 1.95-1.949 1.95-5.122 0-7.071-.944-.945-2.2-1.465-3.536-1.465-1.024 0-2.002.306-2.828.875-.826-.569-1.804-.875-2.829-.875-1.335 0-2.591.52-3.535 1.464-.202.202-.388.43-.562.69-1.124.124-2.164.621-2.974 1.432-.811.811-1.308 1.851-1.432 2.974-.26.173-.488.359-.69.562-1.729 1.728-1.924 4.417-.588 6.364-1.335 1.946-1.139 4.635.589 6.363zm14.913.641-3.382-4.062c.443-.897.617-1.918.475-2.927l.03-.03c1.013.143 2.036-.033 2.934-.478l4.056 3.385zm-13.499-7.711c-1.169-1.17-1.169-3.073 0-4.243.184-.184.412-.346.717-.509.327-.175.531-.517.528-.888-.004-.809.307-1.568.877-2.139.566-.565 1.318-.876 2.122-.876h.023c.369 0 .708-.203.882-.528.163-.305.325-.532.509-.716 1.134-1.134 3.109-1.134 4.243 0 .375.375 1.039.375 1.414 0 1.134-1.134 3.109-1.134 4.243 0 1.169 1.17 1.169 3.073 0 4.243-.185.185-.412.346-.715.508-.328.175-.532.517-.53.889.005.81-.306 1.569-.876 2.139-.756.755-1.839 1.038-2.888.762-.346-.091-.711.008-.962.259l-.785.784c-.252.252-.351.619-.26.963.278 1.053-.007 2.132-.762 2.888-.566.565-1.318.876-2.122.876-.008 0-.016-.001-.023 0-.369 0-.708.203-.882.529-.162.303-.323.531-.508.715-1.17 1.17-3.073 1.17-4.243 0-1.169-1.17-1.169-3.073 0-4.243.389-.39.389-1.023-.002-1.413z" />
</svg>
<span class="navbar-text d-block">Recipes</span>
</a>
</li>
<li class="nav-item me-3">
<a class="nav-link" href="grocery.html">
<svg xmlns="http://www.w3.org/2000/svg" id="outline" viewBox="0 0 512 512" width="40" height="40">
<path d="M136,456a24.027,24.027,0,0,0,24-24V336a24,24,0,0,0-48,0v96A24.027,24.027,0,0,0,136,456Zm-8-120a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z" />
<path d="M216,456a24.027,24.027,0,0,0,24-24V336a24,24,0,0,0-48,0v96A24.027,24.027,0,0,0,216,456Zm-8-120a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z" />
<path d="M296,456a24.027,24.027,0,0,0,24-24V336a24,24,0,0,0-48,0v96A24.027,24.027,0,0,0,296,456Zm-8-120a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z" />
<path d="M376,456a24.027,24.027,0,0,0,24-24V336a24,24,0,0,0-48,0v96A24.027,24.027,0,0,0,376,456Zm-8-120a8,8,0,0,1,16,0v96a8,8,0,0,1-16,0Z" />
<path d="M464,216h0a85.1,85.1,0,0,0-24-59.259V128a8,8,0,0,0-8-8h-4.687l10.343-10.343a30.627,30.627,0,0,0-43.313-43.314L340.686,120H328V96a8,8,0,0,0-1.6-4.8L304,61.333V32a8,8,0,0,0-8-8H192a8,8,0,0,0-8,8V61.333L161.6,91.2l.007.006A7.948,7.948,0,0,0,160,96v28.671a32.649,32.649,0,0,0-16-4.649V88a8,8,0,0,0-8-8H88a8,8,0,0,0-8,8v32.022a32.9,32.9,0,0,0-32,32.845V216a32,32,0,0,0,0,64h1.136L75.155,449.126A45.6,45.6,0,0,0,120.469,488H391.531a45.6,45.6,0,0,0,45.314-38.875L462.864,280H464a32,32,0,0,0,0-64Zm-84.686-48h36.121a86.176,86.176,0,0,0-15.409,48H331.314Zm53.028,4.183A69.159,69.159,0,0,1,448,216h-31.97A70.111,70.111,0,0,1,432.342,172.183ZM424,136v16H395.313l16-16ZM405.656,77.657a14.628,14.628,0,1,1,20.687,20.686l-160,160a14.628,14.628,0,1,1-20.687-20.686ZM280,72,268,88H184l12-16ZM176,104h88v92.686L244.687,216H176V104Zm136,44.686V136h12.686ZM312,120h-8a8,8,0,0,0-8,8v32a7.955,7.955,0,0,0,.936,3.751L280,180.686V98.667l16-21.333,16,21.333ZM288,40V56H200V40ZM128,96v24H96V96ZM64,200h80V184H64V152.867A16.885,16.885,0,0,1,80.867,136h62.266A16.885,16.885,0,0,1,160,152.867V216H64ZM32,248a16.019,16.019,0,0,1,16-16H229.878a30.66,30.66,0,0,0,0,32H48A16.019,16.019,0,0,1,32,248ZM421.03,446.692A29.685,29.685,0,0,1,391.531,472H120.469a29.685,29.685,0,0,1-29.5-25.307L65.325,280h381.35ZM464,264H283.314l32-32H464a16,16,0,0,1,0,32Z" />
</svg>
<span class="navbar-text d-block">Grocery</span>
</a>
</li>
<li class="nav-item">
<div class="mx-auto">
<!-- Theme switch toggle adapted from Matt Smith's Codepen -->
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" />
<span class="slider round"></span>
</label>
<span class="icon-text d-block">Dark Mode</span>
</div>
</li>
</ul>
</div>
</nav>
</header>
<main class="flex-grow-1">
<section>
<button class="btn btn-secondary mx-3 mt-3 back-to-meal-plan">Back to meal plan</button>
<div class="section-card-wrapper px-4">
<h3 class="recipe-title text-center">Chocolate Overnight Oats & Berries</h3>
<div class="w-100 mx-auto px-3 text-md-center">
<img src="https://healthynibblesandbits.com/wp-content/uploads/2014/08/Chocolate-Overnight-Oats-Berries-1.jpg" alt="Chocolate Overnight Oats & Berries" class="w-100 rounded recipe-img mx-auto">
<p class="small text-muted px-3 mt-2">Ready in: <span id="cooking-duration">15</span> mins</p>
</div>
<div class="recipe-ingredients row">
<div class="col-12 col-lg-8">
<h4>Ingredients</h4>
<p class="small text-muted ingredient-instruction">(Click + or - button to add or remove item from grocery list)</p>
<p class="small text-muted">Servings: <span id="servings"></span></p>
<div>
<ul class="ingredient-list list-group">
<!-- ingredient list populated dynamically -->
</ul>
</div>
</div>
<div class="recipe-nutrient-breakdown d-none d-lg-block col-lg-4">
<h6 class="text-uppercase text-center pt-3">Caloric Breakdown</h6>
<div class="row py-3">
<div class="col-6 col-lg-12 mb-lg-4 chart-container">
</div>
<div class="col-6 col-lg-12 text-center my-auto recipe-nutrients-absolute">
<div class="clearfix">
<div class="d-inline-block text-end w-25 me-2">Calories:</div>
<div class="d-inline-block w-25 text-start"><span class="calories"></span></div>
</div>
<div class="clearfix">
<div class="protein-color d-inline-block text-end w-25 me-2">Protein:</div>
<div class="protein-color d-inline-block w-25 text-start"><span class="protein"></span>g</div>
</div>
<div class="clearfix">
<div class="fat-color d-inline-block text-end w-25 me-2">Fat:</div>
<div class="fat-color d-inline-block w-25 text-start"><span class="fat"></span>g</div>
</div>
<div class="clearfix">
<div class="carbs-color d-inline-block text-end w-25 me-2">Carbs:</div>
<div class="carbs-color d-inline-block w-25 text-start"><span class="carbohydrates"></span>g</div>
</div>
</div>
</div>
</div>
</div>
<div class="mt-3">
<div class="recipe-instructions">
<h4>Instructions</h4>
<!-- recipe instructions populated dynamically -->
</div>
</div>
<hr class="my-3 d-block d-lg-none">
<div class="recipe-nutrient-breakdown d-block d-lg-none">
<h6 class="text-uppercase text-center pt-3">Caloric Breakdown</h6>
<div class="row py-3">
<div class="col-12 col-sm-6 mb-lg-4 text-sm-end chart-container">
</div>
<div class="col-12 col-sm-6 text-center text-sm-start my-auto pt-3 recipe-nutrients-absolute">
<div class="clearfix">
<div class="d-inline-block text-end w-25 me-2">Calories:</div>
<div class="d-inline-block w-25 text-start"><span class="calories"></span></div>
</div>
<div class="clearfix">
<div class="protein-color d-inline-block text-end w-25 me-2">Protein:</div>
<div class="protein-color d-inline-block w-25 text-start"><span class="protein"></span>g</div>
</div>
<div class="clearfix">
<div class="fat-color d-inline-block text-end w-25 me-2">Fat:</div>
<div class="fat-color d-inline-block w-25 text-start"><span class="fat"></span>g</div>
</div>
<div class="clearfix">
<div class="carbs-color d-inline-block text-end w-25 me-2">Carbs:</div>
<div class="carbs-color d-inline-block w-25 text-start"><span class="carbohydrates"></span>g</div>
</div>
</div>
</div>
</div>
</div>
<button class="btn btn-secondary mx-3 mb-3 back-to-meal-plan">Back to meal plan</button>
</section>
</main>
<footer class="w-100 align-self-center">
<div class="row g-0 text-center">
<div class="col-4">
<img src="assets/img/green-meals-logo-icon.svg" alt="Green Meals logo" height="60" width="60">
</div>
<div class="col-4 d-flex align-items-center justify-content-center">
<div class="d-inline-block text-center me-md-3">
<span class="d-block icon-text">Powered by</span>
<span class="footer-sponsor"><a href="https://spoonacular.com/food-api" target="_blank" rel="noopener">Spoonacular API</a></span>
</div>
<a href="https://spoonacular.com/food-api" target="_blank" rel="noopener" aria-label="Spoonacular API"><img class="d-none d-md-inline-block" src="assets/img/spoonacular-api-logo.svg" alt="Spoonacular API logo" width="60" height="60"></a>
</div>
<div class="col-4 d-flex align-items-center justify-content-center">
<ul class="list-inline social-links my-auto">
<li class="list-inline-item me-0">
<a href="http://www.facebook.com" target="_blank" rel="noopener">
<i class="fab fa-facebook-f" aria-hidden="true"></i>
<span class="sr-only">Facebook</span>
</a>
</li>
<li class="list-inline-item me-0">
<a href="http://www.twitter.com" target="_blank" rel="noopener">
<i class="fab fa-twitter" aria-hidden="true"></i>
<span class="sr-only">Twitter</span>
</a>
</li>
<li class="d-block d-sm-none"></li>
<li class="list-inline-item me-0">
<a href="http://www.instagram.com" target="_blank" rel="noopener">
<i class="fab fa-instagram" aria-hidden="true"></i>
<span class="sr-only">Instagram</span>
</a>
</li>
<li class="list-inline-item me-0">
<a href="http://www.youtube.com" target="_blank" rel="noopener">
<i class="fab fa-youtube" aria-hidden="true"></i>
<span class="sr-only">Youtube</span>
</a>
</li>
</ul>
</div>
</div>
</footer>
<div class="returning-user-modal"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2"></script>
<script src="assets/js/main.js"></script>
<script src="assets/js/recipe-details.js"></script>
</body>
</html>