-
Notifications
You must be signed in to change notification settings - Fork 0
/
search.html
executable file
·133 lines (117 loc) · 4.91 KB
/
search.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Concert Finder</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="assets/css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="assets/css/custom.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<nav class="black" role="navigation">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo white-text" href="index.html">Concert Finder</a>
</div>
</nav>
<!-- Search Form and Image Section -->
<div id="input-row" class="row indigo darken-4">
<!-- Search Form -->
<div class="card indigo darken-4 col s12 m6 l7">
<div id="user-form" class="card-content white-text col s10 m10 l10">
<span class="card-title white-text"><strong>Start Looking</strong></span><br>
<div class="input-field col s12">
<input id="artist-name" type="text">
<label class="active white-text" for="user-search">Search an Artist</label>
</div>
<div class="input-field col s5">
<input id="zip-code" type="text">
<label class="active white-text" for="user-zip">Zip Code</label>
</div>
<div class="input-field col s7" id="distance-form">
<select id="distance-data">
<option value="" disabled selected>Distance</option>
<option value="5">5 miles</option>
<option value="10">10 miles</option>
<option value="15">15 miles</option>
<option value="20">20 miles</option>
<option value="25">25 miles</option>
<option value="50">50 miles</option>
<option value="100">100 miles</option>
</select>
</div>
<button class="btn right waves-effect waves-light" id="submit" type="submit" name="action">Submit
<i class="material-icons right">send</i>
</button>
</div>
<div class="col s1 m1 l1 right">
<p class="center light-blue-text" style="font-size: .75rem; line-height: 1rem; margin: 20px 0 0 0">Users<br>
<i class="middle material-icons">people</i></p></div>
<div id="connected-viewers" class="col s1 m1 l1 right" style=";"></div>
</div>
<div id="event-card" class="col s12 m6 l5">
<div class="card black">
<div class="card-image">
<img class="responsive-img" src="assets/images/pexels-photo-1.jpeg">
</div>
<span class="card-title white-text" id="display-band"></span>
</div>
</div>
</div> <!-- end of INPUT row -->
<div class="row">
<div class="col s12 m12 l12">
<div class="card">
<p id="result-counter"></p>
<table id="concert-table" class="striped">
<thead>
<tr>
<th>Title</th>
<th>City</th>
<th>Venue</th>
<th>Date</th>
<th>Directions</th>
</tr>
</thead>
<tbody id="concert-results">
<!-- Dynamic content added with jQuery -->
</tbody>
</table>
</div>
</div>
<div class="col s12 m12 l12">
<div class="card" id="maps-form">
<div id="floating-panel" style="display: none;">
<b>Mode of Travel: </b>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
</select>
<div id="ETA" style="text-align: left;"></div>
</div>
<div id="map"></div>
</div>
</div>
</div> <!-- end of OUTPUT row -->
<div id="bottom"></div>
<!-- Scripts -->
<!-- jQuery -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Materialize -->
<script src="assets/js/materialize.js"></script>
<!-- Firebase -->
<script src="https://www.gstatic.com/firebasejs/4.6.0/firebase.js"></script>
<script src="assets/js/init.js"></script>
<!-- Moment.JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.19.1/moment.js"></script>
<!-- Main Javascript -->
<script src="assets/js/script.js"></script>
<!-- Google Maps API -->
<script src="assets/js/googlemapapi.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfjAWzmCK5HdP2KCyLwggQu90uT2QeWuY&callback=startMap">
</script>
</body>
</html>