forked from matthewglassman/projectrecipe
-
Notifications
You must be signed in to change notification settings - Fork 0
/
ProjectOne_FirstDraft.html
205 lines (153 loc) · 7.42 KB
/
ProjectOne_FirstDraft.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PantryDelish</title>
<!-- Viewport controls how webpage is displayed on mobile device-->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<!-- Link to reset CSS file -->
<link rel="stylesheet" type="text/css" href="css/reset.css">
<!-- Link to MaterializeCSS -->
<link type="text/css" rel="stylesheet" href="css/materialize.css" media="screen,projection"/>
<!-- Link to Flexdatalist library -->
<link type="text/css" rel="stylesheet" href="css/jquery.flexdatalist.css">
<!-- Link to custom CSS file -->
<link type="text/css" rel="stylesheet" href="css/style.css">
<!--Link to google fonts-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Firebase Reference -->
<script src="https://www.gstatic.com/firebasejs/3.6.4/firebase.js"></script>
<style>
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface|Pacifico|Rock+Salt|Shrikhand');
</style>
</head>
<body>
<!-- Top Nav Bar -->
<nav class="brown lighten-2">
<div class="container nav-wrapper">
<a href="#!" class="brand-logo">PANTRYDelish</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons">menu</i></a>
<ul class="right hide-on-med-and-down">
<li><a class="waves-effect pink darken-4 btn modal-trigger" href="#modal1">Login</a></li>
<li><a class="scrollspy pink darken-4 btn" href="#tab-section" id="mySaved">My Saved Recipes</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a class="waves-effect pink darken-4 btn modal-trigger" href="#modal1" id="login">Login</a></li>
<li><a class="scrollspy pink darken-4 btn" href="#tab-section" id="mySavedMobile">My Saved Recipes</a></li>
</ul>
</div>
</nav>
<!-- Modal Structure -->
<div id="modal1" class="modal">
<div class="modal-content">
<h4 class="teal-text text-lighten-1">Login</h4>
<p>Please enter your username below!</p>
</div>
<div class="modal-footer">
<div class="input-field col s1 m1 l1" id="usernameInput">
<i class="mdi-action-account-circle prefix"></i>
<input id="icon_prefix" type="text" class="validate unEntered">
<label for="icon_prefix" class="#1de9b6-text">Username</label>
</div>
<a href="ProjectOne_FirstDraft.html" class="modal-action modal-close waves-effect waves-green btn-flat" id="user-login">Login</a>
</div>
</div>
<div class="responsive-img" id="mainImage">
<div class="container section">
<!-- <div class="row">
<form class="col s12">
<div class="input-field col s4">
<i class="mdi-action-account-circle prefix"></i>
<input id="icon_prefix" type="text" class="validate">
<label for="icon_prefix" class="white-text">Username</label>
</div> --><!-- closing input field -->
<!-- <div class="row"> -->
<!-- <div class="input-field col s4">
<i class="mdi-action-lock-outline prefix"></i>
<input id="icon_password" type="password" class="validate">
<label for="icon_password" class="white-text">Password</label>
</div> --> <!-- closing input field -->
<!-- <div class="input-field col s2">
<button class="btn #03a9f4 light-blue" type="submit" name="action" id="loginButton" ><i class="mdi-action-lock-open"></i><a id="loginButton" href="ProjectOne_FirstDraft.html">Login</a></button> -->
<!-- </div> --> <!--input col s4 -->
<!-- </form> -->
<!-- </div> --> <!-- end of row
<!- User Input -->
<div class="row section" id="ingredientInput">
<div class="col s4 m4 l6">
<h4>What's in Your Pantry<span id="displayMember"></span>!?</h4>
<form>
<input type="text"
placeholder= "Type in your ingredients here..."
class="flexdatalist white-text"
data-min-length="1"
multiple="multiple"
list="ingredients"
name="ingredients"
id="ingredientsInput">
<datalist id="ingredients">
<option value="zucchini">zucchini</option>
<option value="cheese">cheese</option>
<option value="pasta">pasta</option>
<option value="tomatoes">tomatoes</option>
<option value="bread">bread</option>
<option value="milk">milk</option>
<option value="shrimp">shrimp</option>
<option value="chicken">chicken</option>
<option value="mushrooms">mushrooms</option>
</datalist>
<div>
<input id="numOfRecipes" type="text" class="white-text" size="1" maxlength="2" placeholder="How Many Recipes?" style="width:150px">
<span id="badNumber" class="red-text"></span>
</div>
<a class="waves-effect pink darken-4 btn-large" type="button" name="action" id="find-recipe" href="#recipeBank">Let's get cooking!</a>
<!-- <i class="material-icons right">send</i> -->
<!-- </div> --><!--End of col12-->
<!-- </div> --><!--End of row-->
</form>
</div><!--End of col6-->
</div><!--end of row-->
</div> <!-- end of container -->
</div> <!-- end of wrapper -->
<!-- Box Where Selected Ingredients Will Populate -->
<!-- <div class="col l6">
<div class="card-panel">
<h2>Ingredients Populate</h2>
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>button</a>
</div>
</div> -->
<div class="container section scrollspy" id="tab-section">
<!-- Tabs to display recipes and videos -->
<div class="row">
<div class="tabs-content col s12 m12 l12">
<ul class="tabs">
<li class="tab col s4 m4 l4"><a id="onLoad" href="#recipeBank">Recipes</a></li>
<li class="tab col s4 m4 l4"><a href="#videoBank">Videos</a></li>
<li class="tab col s4 m4 l4"><a id="saved" href="#userSavedRecipes">My Saved Recipes</a></li>
</ul>
</div> <!-- End of col12-->
<div id="recipeBank" class="active scrollspy col s12 m12 l12"><div id = "recipes-container" class = "row"></div></div>
<div id="videoBank" class="scrollspy col s12 m12 l12"></div>
<div id="userSavedRecipes" class="scrollspy col s12 m12 l12"><div id = "savedRecipes-container" class = "row"></div></div>
</div><!-- End of row -->
</div> <!-- End of container -->
<footer class="page-footer brown lighten-2">
<div class="row">
<div class="col s12 m12 l12">
</div>
<div class="col">
</div>
</div>
<div class="footer-copyright container brown lighten-2">
© 2017 Copyright Polished Papayas
<a class="grey-text text-lighten-4 right" href="#!">Links</a>
</div>
</footer>
<!-- jQuery is required by Materialize to function -->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.js"></script>
<script type="text/javascript" src="js/jquery.flexdatalist.js"> </script>
<script type="text/javascript" src="js/jamie.js"> </script>
<script type="text/javascript" src="js/jincy.js"> </script>
</body>
</html>