-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
166 lines (143 loc) · 7.19 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Holey Chi</title>
<!-- Viewport -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel='icon' href='assets/images/favicon-outside-transparent.png' type='image/x-icon'/ >
<!-- jQuery Link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Mapbox CSS -->
<link href='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.css' rel='stylesheet' />
<!-- Mapbox JavaScript -->
<script src='https://api.mapbox.com/mapbox-gl-js/v0.40.0/mapbox-gl.js'></script>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<!-- Leaflet JavaScript -->
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<!-- Materialize JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab:400,700" rel="stylesheet">
<!-- Our CSS -->
<link rel="stylesheet" href="assets/css/leaflet.css">
<link rel="stylesheet" href="assets/css/style.css">
<script src="https://www.gstatic.com/firebasejs/4.5.0/firebase.js"></script>
</head>
<body>
<header>
<nav>
<div class="nav-wrapper container">
<ul>
<a href="index.html" class="brand-logo grey-text text-darken-3">
<img src="assets/images/logo-transparent.png" id="logo">
</a>
<a href="#" data-activates="mobile-demo" class="button-collapse"><i class="material-icons grey-text text-darken-3">menu</i></a>
</ul>
<ul class="right hide-on-med-and-down">
<li><a href="about.html" class="grey-text text-darken-3">About</a></li>
<li><a href="crew.html" class="grey-text text-darken-3">Meet the Crew</a></li>
<li><a href="contact.html" class="grey-text text-darken-3">Contact Us</a></li>
<li><a href="https://www.cityofchicago.org/city/en/depts/cdot/provdrs/street/svcs/report_a_pot_holeinstreet.html" target="_blank" class="grey-text text-darken-3">Report a Pothole</a></li>
<li><a href="http://www.chicityclerk.com/community-affairs/claims" target="_blank" class="grey-text text-darken-3">File a Claim</a></li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li><a href="about.html" class="grey-text text-darken-3">About</a></li>
<li><a href="crew.html" class="grey-text text-darken-3">Meet the Crew</a></li>
<li><a href="contact.html" class="grey-text text-darken-3">Contact Us</a></li>
<li><a href="https://www.cityofchicago.org/city/en/depts/cdot/provdrs/street/svcs/report_a_pot_holeinstreet.html" target="_blank" class="grey-text text-darken-3">Report a Pothole</a></li>
<li><a href="http://www.chicityclerk.com/community-affairs/claims" target="_blank" class="grey-text text-darken-3">File a Claim</a></li>
</ul>
<a href="#"><i class="right material-icons grey-text text-darken-3" id="show-search-box">search</i></a>
</div>
</nav>
</header>
<!-- Map -->
<main class="responsive-image" id="mapid"></main>
<!-- Collapsible Search Box -->
<div class="row" id="main-action" style="display: none;">
<div class="card blue lighten-5 col s10 offset-s1 l8 offset-l2">
<div class="card-content">
<form class="input-field">
<input id="search" type="text" class="validate">
<label for="search">Search</label>
</form>
<ul class="collapsible row" id="historyList" data-collapsible="accordion">
<li class="col s12">
<div class="collapsible-header blue lighten-5"><i class="material-icons">history</i>My History</div>
<div class="collapsible-body collection">
<a href="#" class="my-history collection-item blue lighten-5" id="my-history-0">My History 1
</a>
<a href="#" class="my-history collection-item blue lighten-5" id="my-history-1">My History 2
</a>
<a href="#" class="my-history collection-item blue lighten-5" id="my-history-2">My History 3
</a>
<a href="#" class="my-history collection-item blue lighten-5" id="my-history-3">My History 4
</a>
<a href="#" class="my-history collection-item blue lighten-5" id="my-history-4">My History 5
</a>
</div>
</li>
<li class="col s12">
<div class="collapsible-header blue lighten-5"><i class="material-icons">people</i>Global History</div>
<div class="collapsible-body collection">
<a href="#" class="global-history collection-item blue lighten-5" id="global-history-1">Global History 1
</a>
<a href="#" class="global-history collection-item blue lighten-5" id="global-history-2">Global History 2
</a>
<a href="#" class="global-history collection-item blue lighten-5" id="global-history-3">Global History 3
</a>
<a href="#" class="global-history collection-item blue lighten-5" id="global-history-4">Global History 4
</a>
<a href="#" class="global-history collection-item blue lighten-5" id="global-history-5">Global History 5
</a>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- Tabbed Search Box -->
<!-- <div class="row" id="main-action">
<div class="col s12">
<div class="card blue lighten-5">
<div class="card-content">
<form class="input-field">
<input id="search" type="text" class="validate">
<label for="search">Search</label>
</form>
</div>
<div class="card blue lighten-5">
<ul id="search-menu" class="tabs tabs-fixed-width blue lighten-5">
<li class="tab col"><a class="active collapsible" href="#search-swipe"><i class="material-icons">search</i>Search</a></li>
<li class="tab col"><a class="collapsible" href="#my-history"><i class="material-icons">history</i>My History</a></li>
<li class="tab col"><a class="collapsible" href="#global-history"><i class="material-icons">people</i>Global History</a></li>
</ul>
<div id="search-swipe" class="col s12 blue lighten-5">Search</div>
<div id="my-history" class="col s12 blue lighten-5">History</div>
<div id="global-history" class="col s12 blue lighten-5">Global History</div>
</div>
</div>
</div>
</div> --> <!-- End of Search Box -->
<footer class="page-footer">
<div class="footer-copyright">
<div class="container center">
<span class="grey-text text-darken-4">© 2017 <a href="#" class="grey-text text-darken-4">Ali Arfeen</a> | <a href="#" class="grey-text text-darken-4">Zaynaib Giwa</a> | <a href="#" class="grey-text text-darken-4">Kaitlyn Strand</a> | <a href="#" class="grey-text text-darken-4">Jason Terrell</a>
</span>
</div>
</div>
</footer>
<script type="text/javascript" src="assets/javascript/leaflet.js"></script>
<script type="text/javascript" src="assets/javascript/app.js"></script>
</body>
</html>