-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
201 lines (175 loc) · 8.08 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SnapSnax</title>
<!-- Stylesheets and scripts ===================================== -->
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Reset CSS -->
<link rel="stylesheet" href="assets/css/reset.css">
<!-- Materialize -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/css/materialize.min.css">
<!-- Style.css -->
<link rel="stylesheet" href="assets/css/style.css">
<!-- Icons for Materialize -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<!-- Body ========================================================= -->
<body>
<!-- Nav bar with site logo that returns to homepage -->
<nav>
<div class="nav-wrapper red darken-3">
<a href="index.html" class="brand-logo">SNAPSNAX</a>
<!-- ============================================================= -->
<!-- In case we want side links
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="">sass</a></li>
<li><a href="">sass</a></li>
<li><a href="">sass</a></li>
</ul> -->
<!-- ============================================================== -->
</div>
</nav>
<!-- Parallax Container -->
<div class="parallax-container">
<div class="section no-pad-bot">
<div class="container">
<br><br>
<!-- Header in the center of page -->
<h1 class="header center red-text text-darken-3">SnapSnax</h1>
<div class="row center">
<h4 class="header col s12 red-text text-darken-3 light">Solving your food indecisions one meal at a time.</h4>
</div>
<div class="row center">
<!-- Button that opens up modal to food and $$$ choices -->
<a class="waves-effect waves-light btn-large modal-trigger red darken-3" href="#modal1"><i class="material-icons left">star</i><i class="material-icons right">star</i>What are you having?</a>
</div>
<br><br>
</div>
</div>
<!-- Parallax image top -->
<div class="parallax"><img src="assets/images/paperbag.jpg"></div>
</div>
<!-- Main container div -->
<div class="container">
<!-- ROW #1 -->
<div class="row">
<!-- Column #1 Row#1 -->
<div class="col s12">
<br><br>
<!-- <div class="row"> -->
<div class="card medium white darken-4">
<div class="card-content white-text">
<span class="card-title"></span>
<!-- ====================================================================== -->
<!-- Username input for firebase storage -->
<!-- <div class="input-field col s6 red-text text-darken-3">
<i class="material-icons prefix">account_circle</i> -->
<!-- Input id: userName -->
<!-- <input id="userName" type="text" class="">
<label for="userName">Username</label>
</div> -->
<!-- ====================================================================== -->
<!-- Location input -->
<div class="input-field col s4 red-text text-darken-3">
<i class="material-icons prefix">my_location</i>
<!-- Input id: userLocation -->
<input id="userLocation" type="text" class="">
<label for="userLocation">Location</label>
</div>
<!-- Button to submit parameters and find a restaurant -->
<div class="col s4 offset-s4">
<button class="btn waves-effect waves-light red darken-3" id="FindRest" type="submit" name="action">Find your restaurant
<i class="material-icons right">send</i>
</button>
</div>
<div class="row">
<div class="col m8">
<div id="results">
</div>
</div>
<div class="col m4">
<div id="map"></div>
</div>
<!-- Show Google Map ==================================== -->
<!-- End Google Map ==================================== -->
</div>
</div> <!-- Results Div Column -->
</div> <!-- Results Div Row -->
</div>
</div>
<!-- </div> -->
</div> <!-- Closes Column#1 Row#1 -->
<!-- Modal Trigger -->
</div> <!-- Closes Row#1-->
<!-- ROW #2 -->
<div class="row">
<!-- Modal Structure -->
<div id="modal1" class="modal bottom-sheet">
<div class="modal-content">
<h4>Pick your meal options!</h4>
<br><br><br><br><br><br><br><br><br><br><br><br><br>
<!-- Input field with food choices -->
<div class="input-field col s5">
<select id="food" multiple icons">
<option value="" disabled selected>Choose your options!</option>
<option value="breakfast" data-icon="http://lorempixel.com/output/food-q-c-150-150-1.jpg" class="left circle">Breakfast</option>
<option value="lunch" data-icon="http://lorempixel.com/output/food-q-c-150-150-2.jpg" class="left circle">Lunch</option>
<option value="dinner" data-icon="http://lorempixel.com/output/food-q-c-150-150-3.jpg" class="left circle">Dinner</option>
<option value="takeout" data-icon="http://lorempixel.com/output/food-q-c-150-150-4.jpg" class="left circle">Take-out</option>
<option value="delivery" data-icon="http://lorempixel.com/output/food-q-c-150-150-5.jpg" class="left circle">Delivery</option>
</select>
<!-- Labels the input field -->
<label>What would you like?</label>
</div>
<!-- Input field with price range -->
<div class="input-field col s3 offset-s1">
<!-- <select multiple icons">
<option value="" disabled selected>Pick a price range!</option>
<option value="" data-icon="http://lorempixel.com/output/food-q-c-150-150-1.jpg" class="left circle">$</option>
<option value="" data-icon="http://lorempixel.com/output/food-q-c-150-150-2.jpg" class="left circle">$$</option>
<option value="" data-icon="http://lorempixel.com/output/food-q-c-150-150-3.jpg" class="left circle">$$$</option>
<option value="" data-icon="http://lorempixel.com/output/food-q-c-150-150-4.jpg" class="left circle">$$$$</option>
</select> -->
<!-- Labels the input field -->
<!-- <label>How much are you looking to spend?</label> -->
</div>
<br><br><br><br><br>
</div>
<!-- Modal button -->
<div class="modal-footer">
<a href="#!" class=" submit modal-action modal-close waves-effect waves-green btn-flat">Confirm</a>
</div>
</div>
</div>
</div> <!-- Closes container div -->
<!-- Parallax bottom image -->
<div class="parallax-container">
<div class="parallax"><img src="assets/images/burger.jpg"></div>
</div>
</body>
<!-- Footer with copyright ================================================================== -->
<footer class="page-footer red darken-3">
<div class="footer-copyright red darken-3">
<div class="container">
© 2016 Copyright SnapSnax
<!-- More links if we want -->
<!-- <a class="grey-text text-lighten-4 right" href="#!">More Links</a> -->
</div>
</div>
</footer>
<!-- Scripts ================================================================================= -->
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.7/js/materialize.min.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/3.4.0/firebase.js"></script>
<!-- Google Maps -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCNEH9ddgTnDDO-HPKQtW1INRnXiYkp5aA"></script>
<!-- JavaScript -->
<script type="text/javascript" src="assets/javascript/oauth.js"></script>
<script type="text/javascript" src="assets/javascript/sha1.js"></script>
<script type="text/javascript" src="assets/javascript/js.js"></script>
</html>