-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
126 lines (105 loc) · 5 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
<DOCTYPE html>
<html>
<head>
<title> Smith College Dining Menu</title>
<!-- Favicon -->
<link rel="shortcut icon" type="image/png" href="logo.png"/>
<!-- Boostrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet">
<!-- CSS -->
<link href="menus.css" rel="stylesheet">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<!-- Navigation Bar -->
<nav class="navbar navbar-light" style = "background-color: #003e51">
<div class="navbar-brand icon">
<button class="fa fa-bars" id="collapse" onClick="hide()"></button>Smith College Dining Menu
</div>
</nav>
<!-- row -->
<div class="row">
<!-- Sidebar -->
<div class="col-md-3 show" id="sidebar">
<form >
<!-- Calendar Date -->
<!-- <p>Date: <input type="text" id="datepicker"></p> -->
<!-- <hr> -->
<!-- Are of campus dropdown -->
<div>
<label for="area">Area of campus:</label>
<select id="area">
<option selected>All</option>
<option>Green Street</option>
<option>Center Campus</option>
<option>East Quad</option>
<option>West Quad</option>
<option>Lower Elm Street</option>
<option>Upper Elm Street</option>
</select>
</div>
<!-- Dietary Restriction -->
<div>
<label for="diet">Dietary Restriction:</label>
<select id="diet">
<option selected>None</option>
<option>Vegetarian</option>
<option>Vegan</option>
</select>
</div>
<!-- Allergens -->
<div id="allergen">
<label for="allergen">Allergen </label><br/>
<input type="checkbox" name="allergen" value="wheat"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Gluten.jpg"> Wheat <br/>
<input type="checkbox" name="allergen" value="eggs"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Eggs.jpg"> Eggs <br/>
<input type="checkbox" name="allergen" value="nuts"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Peanuts.jpg"> Nuts <br/>
<input type="checkbox" name="allergen" value="fish"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Fish.jpg"> Fish <br/>
<input type="checkbox" name="allergen" value="milk"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Dairy.jpg"> Milk <br/>
<input type="checkbox" name="allergen" value="shellfish"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Shellfish.jpg"> Shellfish <br/>
<input type="checkbox" name="allergen" value="soy"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Soy.jpg"> Soy <br/>
<input type="checkbox" name="allergen" value="tree_nuts"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Treenuts.jpg"> Tree Nuts <br/>
<input type="checkbox" name="allergen" value="corn"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Corn.jpg"> Corn <br/>
<input type="checkbox" name="allergen" value="sesame"/> <img class="allergenIcon" src="http://cbweb.smith.edu/NetNutrition/Images/traits/Sesame.jpg"> Sesame <br/>
</div>
<hr>
<!-- Search Box -->
<div>
<label for="searchTerm">Favorite Food Search:</label>
<br/>
<input type="text" id="searchTerm" placeholder="e.g. Brownies">
</div>
<br/><br/>
<!-- Filter Button -->
<div>
<button class="btn btn-primary" id="filter">Filter results</button>
</div>
</form>
</div> <!-- end of sidebar -->
<!-- Menu Content -->
<div class="col-md-8">
<!-- Calendar Date -->
<p id="calendar">Date: <input type="text" id="datepicker"></p>
<button class="btn btn-warning" id="location">Sort By Your Location</button>
<p id="showLocation"></p>
<div id="main"></div>
</div>
</div> <!-- end of row -->
<!-- JQuery Calendar Functionality -->
<script>
$( function() {
$( "#datepicker" ).datepicker({
dateFormat:"mm/dd/yy",
minDate: 0
}).datepicker("setDate", new Date());
} );
</script>
<!-- Customer JS for menu showing/filtering -->
<script src="menus.js"></script>
</body>
</html>