-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
251 lines (225 loc) · 10.9 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
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
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Welcome to SHAKR</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- add link to font awesome library -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- HEADER BLOCK -->
<section class="hero">
<div class="hero-body">
<div class="container has-text-centered">
<h1 class="title is-1">
<span class="icon mr-4">
<i class="fa fa-glass"></i>
</span>
<strong>Welcome to SHAKR</strong>
<span class="icon ml-4">
<i class="fa fa-glass"></i>
</span>
</h1>
<br>
<h2 class="subtitle is-spaced">
<strong>You've had a hell of a week. You're thirsty. And you're low on mixers.</strong>
</h2>
<h3 class="subtitle is-spaced">
Tell us what you have, and we'll tell you what you can make!
</h3>
<br>
<h6 class="subtitle is-6 mb-2 is-spaced">
Don't have what you need or would rather someone else make your drink?
</h6>
<div class="columns is-centered">
<div class="column is-half has-text-centered">
<button class="button is-link" id="find-bar-button">Find me a grocery store or bar!</button>
</div>
</div>
</div>
</div>
</section>
<!-- SEARCH FIELD BLOCK -->
<section class="hero is-info">
<div class="hero-body pt-3 pb-5">
<div class="container">
<div id="bad-search-alert-el" style="width:60%; margin:0 auto" class=" my-3">
<!-- Bad searched ingredient alert will render here -->
</div>
<div class="is-size-7">
<p class="has-text-centered has-text-dark ">(Cocktail Database furnished by
<a class='has-text-dark' href="https://thecocktaildb.com" target="_blank">TheCocktailDB.com</a>)
</p>
</div>
<div class="box">
<form id="ingredient-search-field" class="control ">
<div class="field has-addons">
<div class="container control has-icons-left ">
<input id="ingredient-search" class="input is-medium" type="text"
placeholder="Ingredient Search">
<span class="icon is-medium is-left">
<i class="fa fa-search"></i>
</span>
</div>
<div class="control">
<a id="search-button" class="button is-info is-medium">
<i class='fa fa-search fa-lg'></i>
</a>
</div>
</div>
</form>
</div>
<div class="box has-text-centered has-background-light"
style="padding:0.5rem; width:60%; margin:0 auto">
<div class="container">
<p> Search for 1 ingredient at a time. <br><br> The <strong>list</strong> of recipe cards will
show you cocktails based on <strong> ingredients you have on-hand! </strong> </p>
</div>
</div>
</div>
</section>
<div class=" box cta">
<div class="columns is-mobile is-centered">
<div id="ingredient-list-element" class="field is-grouped is-grouped-multiline">
<!-- SEARCHED INGREDIENTS WILL BE RENDERED HERE -->
</div>
</div>
<!-- Button to reload page to begin new search -->
<div class="columns is-centered">
<div class="column is-half has-text-centered">
<button class="button is-light" id="reload-page-button" style="display: none;">Click here to begin new search!</button>
</div>
</div>
</div>
<section class="container">
<div id="cocktail-card-element" class="level-item" style="flex-wrap: wrap; align-items: stretch;">
<!-- Cocktail recipe cards will go here -->
</div>
</section>
<!-- Map Embed API - src setting dynamically from JavaScript -->
<div class="columns is-centered" id="map-section" style="display: none;">
<div class="column is-half has-text-centered">
<hr>
<iframe id="embed-map" width="450" height="250" frameborder="0" style="border:0" allowfullscreen>
</iframe>
</div>
</div>
<!-- Modal for input of either user address or zipcode -->
<div class="modal">
<div class="modal-background"></div>
<div class=" box modal-content" style="background-color: lightslategray;">
<!-- TRYING TO ADD "ENTER" KEY FUNCTIONALITY -->
<form id="ingredient-search-field" class="control ">
<div class="columns">
<div class="column">
<p class="has-text-centered" style="color: black;">Need to pick up additional or
missing
ingredients?</p>
<p class="has-text-centered" style="color: black;">Rather someone else make your
drink?</p>
<br>
<p class="has-text-centered" style="color: black;">Search for either a grocery store
or bar
(select one)</p>
<br>
<div class="control has-text-centered is-size-4" style="color: black;">
<label class="radio">
<input type="radio" name="answer" value="grocery+store">
Grocery Store
</label>
<label class=" radio">
<input type="radio" name="answer" value="bars" checked>
Bar
</label>
</div>
<br>
<p class="has-text-centered" style="color: black;">Please enter in either a
zipcode or address.</p>
<br>
<input class="input" id="zip-only" type="number" placeholder="ZIP">
<hr style="border-style:double">
<input class="input" id="address" type="text" placeholder="Address">
</div>
</div>
<div class="columns">
<div class="column">
<input class="input" id="city" type="text" placeholder="City">
</div>
<div class="column">
<!-- <input class="input" id="state" type="text" placeholder="State"> -->
<div class="select" id="state">
<select>
<option>Select State</option>
<option>AL</option>
<option>AK</option>
<option>AZ</option>
<option>AR</option>
<option>CA</option>
<option>CO</option>
<option>CT</option>
<option>DE</option>
<option>FL</option>
<option>GA</option>
<option>HI</option>
<option>ID</option>
<option>IL</option>
<option>IN</option>
<option>IA</option>
<option>KS</option>
<option>KY</option>
<option>LA</option>
<option>ME</option>
<option>MD</option>
<option>MA</option>
<option>MI</option>
<option>MN</option>
<option>MS</option>
<option>MO</option>
<option>MT</option>
<option>NE</option>
<option>NV</option>
<option>NH</option>
<option>NJ</option>
<option>NM</option>
<option>NY</option>
<option>NC</option>
<option>ND</option>
<option>OH</option>
<option>OK</option>
<option>OR</option>
<option>PA</option>
<option>RI</option>
<option>SC</option>
<option>SD</option>
<option>TN</option>
<option>TX</option>
<option>UT</option>
<option>VT</option>
<option>VA</option>
<option>WA</option>
<option>WV</option>
<option>WI</option>
<option>WY</option>
</select>
</div>
</div>
<div class="column">
<input class="input" id="zip" type="number" placeholder="ZIP">
</div>
</div>
<div class="columns">
<button style="margin:0 auto; width:50%" class="button my-3 is-link"
id="submit-button">Submit</button>
</div>
</form>
</div>
<button class="modal-close is-large" aria-label="close"></button>
</div>
<!-- jQuery library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Relative path to javascript file -->
<script src="./index-javascript.js"></script>
</body>
</html>