-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
151 lines (133 loc) · 5.75 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
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- link to CSS stylesheet -->
<link href="./assets/css/style.css" rel="stylesheet" />
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>The Craver</title>
<link rel="shortcut icon" type="image/png" href="assets/images/favicon.png">
</head>
<nav>
<div class="nav-wrapper grey darken-3">
<div class="left-align">
<a href="#" class="center-align brand-logo">The Craver<i class="large material-icons">local_dining</i></a>
</div>
<ul id="nav-mobile" class="right hide-on-med-and-down"></ul>
</div>
</nav>
<body>
<!-- Page Layout here -->
<div class="box-all">
<div class="hero-image">
<div class="content">
<div class="row onimage ">
<div class="col s12 m4 left">
<div class="inputcard left">
<div class="caption-border style-caption">
<h1 class="h1-text">Craving A Certain Dish?</h1>
</div>
</div>
</div>
<div class="col s12 m4 right">
<div class="card grey z-depth-4 inputcard right">
<div class="card-content white-text">
<div class="row">
<div class="input-field col m10" id='food'>
<p class="left"> What type of food would you like to eat?</p>
<i class="material-icons prefix"></i>
<p class="left">
<input class="left" id="user-food-input" style="width:100%" placeholder="e.g. Pizza" class="materialize-textarea">
</p>
</div>
<div class="input-field col" id='zip'>
<p class="left">What is your Zipcode? (Or click)
<button type="click" id="geolocate" class="left-align btn waves-effect waves-light ">
<i class="material-icons">location_searching</i>
</button>
</p>
<br>
<i class="material-icons prefix"></i>
<p class="left">
<input class="left" id="user-zipcode-input" style="width:100%" placeholder="e.g. 95020" class="materialize-textarea">
</p>
</div>
</div>
<div class="row">
<div class="col valign-wrapper">
<button id="search-button" class="waves-effect waves-light btn valign-wrapper" style="padding: 5px">Search!
</button>
</div>
<div class="col valign-wrapper">
<button id="clear-button" class="waves-effect waves-light btn valign-wrapper" style="padding: 5px">Clear
Search History
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="modal-display">
<!-- Footer-->
<footer class="page-footer grey darken-3">
<div class="container">
<div class="row">
<div class="col s10">
<h5 class="white-text">Challenge project team</h5>
<p class="grey-text text-lighten-4">
Priya, Scot, Neil, Theresa and Anita's project and link to their profiles</p>
</div>
<div class="col s2">
<h5 class="white-text">Links</h5>
<ul>
<li><a class="grey-text text-lighten-3" href="https://scotitakura.github.io/Portfolio/"
target="_blank">Scot</a></li>
<li><a class="grey-text text-lighten-3" href="https://ngdino.github.io/portfolio/"
target="_blank">Neil</a></li>
<li><a class="grey-text text-lighten-3" href="https://priyaravi23.github.io/professional-portfolio/"
target="_blank">Priya</a></li>
<li><a class="grey-text text-lighten-3" href="https://anitapeppercorn.github.io/anitaprofileportfolio/"
target="_blank">Anita</a></li>
<li><a class="grey-text text-lighten-3" href="https://franamaus.github.io/my-portfolio/"
target="_blank">Theresa</a></li>
</ul>
</div>
</div>
</div>
<div class="footer-copyright">
<div class="container">
<div class="row">
<div class="col s10">
© 2020 The Craver Inc.
</div>
<div class="col s2">
<a class="grey-text text-lighten-4 right" href="https://spoonacular.com/food-api">Link
to
Spoonacular API</a>
</div>
</div>
</div>
</div>
</footer>
</div>
</div>
<!--JavaScript at end of body for optimized loading-->
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- link to font awesome -->
<script src="https://kit.fontawesome.com/326ee3d75f.js" crossorigin="anonymous"></script>
<!-- link to Moment.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<!-- jQuery-->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<!-- link to application script -->
<script src="./assets/js/script.js"></script>
</body>
</html>