generated from Code-Institute-Org/gitpod-full-template
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathzero-waste.html
179 lines (176 loc) · 10.2 KB
/
zero-waste.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description"
content="An online recipe search application allowing you to customise results by adding your diet, allergies or even what ingredients you have.">
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<script src="https://kit.fontawesome.com/d90f353352.js" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&family=Special+Elite&display=swap"
rel="stylesheet">
<link rel="stylesheet" href="assets/style.css">
<title>Find My Meal</title>
</head>
<body>
<!-- Container for the background image -->
<div class="background-image-container">
<!--Background image container-->
<div class="background-image">
<!--Navbar template taken from Bootstrap 5 example code and heavily modified - filled by create-page.js-->
<nav class="navbar navbar-expand-sm navbar-light sticky-top">
<!-- Find my meal logo (not displayed at phone breakpoint) - index.html link -->
<a class="navbar-brand d-sm-none" href="index.html"><img class="navbar-logo"
src="assets/images/find-my-meal-logo.png" alt="Find My Meal Logo"></a>
<!-- navbar toggler button -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbar"
aria-controls="navbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- nav items either displayed as dropdown when collapsed or in navbar -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav justify-content-center">
<li class="nav-item d-sm-none d-lg-block">
<!--index.html link-->
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item">
<!--About Modal Link-->
<button type="button" class="nav-link navbar-modal-button" data-bs-toggle="modal"
data-bs-target="#about-modal">About</button>
</li>
<!--Dropdown button for Recipe finder selector-->
<li class="nav-item dropdown">
<button type="button" class="nav-link navbar-modal-button dropdown-toggle"
id="navbarDropdown" data-bs-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">
Recipe Finders
</button>
<!--Dropdown Recipe Search Page Link list-->
<div class="nav-item dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="lucky-dip.html">Lucky Dip</a>
<a class="dropdown-item" href="zero-waste.html">Zero-Waste</a>
<a class="dropdown-item" href="specific-needs.html">Specific Needs</a>
</div>
</li>
<li class="nav-item">
<!--My Supplies Modal Link-->
<button type="button" class="nav-link navbar-modal-button" data-bs-toggle="modal"
data-bs-target="#my-supplies-modal">My Supplies</button>
</li>
<li class="nav-item d-sm-none d-lg-block">
<!--contact.html-->
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</nav>
<!--Page content container-->
<section class="container-fluid main-body">
<div class="row">
<div class="col-12 text-center">
<!--logo image with link (not visable at mobile breakpoint)-->
<a href="index.html" class="d-none d-sm-block">
<img class="recipe-search-pages-logo" src="assets/images/find-my-meal-logo.png"
alt="Find My Meal Logo">
</a>
<!--Page Title-->
<h1>Zero-Waste</h1>
<!--Recipe Search Options Container-->
<div class="selection-options-container">
<!--User Instrutions-->
<p class="text-center">To make a meal with the items you have around, please enter them here
or
select "Use My Supplies" below</p>
<div class="row g-0 enter-ingredients">
<div class="col-12 col-sm-8">
<!--Text input box for ingredient name-->
<input type="text" id="zero-waste-ingredient-name" placeholder="Ingredient">
</div>
<div class="col-12 col-sm-4">
<!--Add button for the text input box-->
<button type="submit" class="add-button" id="zero-waste-add-button">Add</button>
</div>
</div>
<div class="row g-0">
<!--Display container for created elements by clicking the add button-->
<div class="col my-supplies-display-container">
<div class="my-supplies-display" id="zero-waste-ingredients-display">
</div>
</div>
</div>
<div class="row">
<!--Use My Supplies option check box and label-->
<div class="col-12 use-supplies-checkbox">
<label for="use-supplies">Use My Supplies</label>
<input type="checkbox" id="use-supplies" name="use-supplies"
value="yes-use-supplies">
</div>
</div>
</div>
<div class="row g-0">
<!--.col element for submit button spacing-->
<div class="col-1 col-md-2"></div>
<div class="col-10 col-md-8">
<!--Find My Meal button to make API call using user values entered-->
<button type="submit" class="find-my-meal-button"
id="zero-waste-find-my-meal-button">Find
My Meal!</button>
</div>
<!--Container for user feedback when loading-->
<div class="col-1 col-md-2" id="loading"></div>
</div>
</div>
</div>
<!--Recipe Search Results content container (all content will be updated/replaced by item-control.js.
This section will not be wisable until content API call response is loaded into it-->
<section class="recipe-search-results">
<h2 id="result-cards-header"></h2>
<div id="zero-waste-results-cards-display" class="recipe-list">
</div>
<!--/Recipe Search Results content container-->
</section>
<!--/Page content container-->
</section>
<!--/Background Image-->
</div>
<!-- /Container for the background image -->
</div>
<!--footer-->
<footer>
<!--footer creator with background-->
<div class="row g-0 footer-background sticky-bottom">
<!--spacer column-->
<div class="col-3 col-sm-4"></div>
<!--center column with copyright and contact-->
<div class="col-5 col-sm-4 copyright-info">
<a href="contact.html">Contact the developer</a>
<p>© Nicholas Lennon</p>
</div>
<!--column with credit link to the API provider-->
<div class="col-4 powered-by-info">
<p class="logo-label">Powered by</p>
<a href="https://spoonacular.com/food-api" target="_blank" rel="noopener"><img class="spoonacular-logo"
src="assets/images/spoonacular-logo.svg" alt="Spoonacular's Logo"></a>
</div>
</div>
</footer>
<!--Modals container - Modal template taken from Bootstrap 5 example code and heavily modified - filled by create-page.js-->
<div id="modals-container">
</div>
<!--Scripts-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous">
</script>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<!--Local Scripts-->
<script src="assets/js/create-page.js"></script>
<script src="assets/js/item-control.js"></script>
<script src="assets/js/load-results.js"></script>
<script src="assets/js/footer-position.js"></script>
</body>
</html>