<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="/static/style.css"> <title>Events Search</title> <script src="/static/functions.js"></script> </head> <body> <div class="search"> <div class="title"> Events Search </div> <form onsubmit="return search();" id="search_form"> <label>Keyword<i>*</i></label><br> <input type="text" id="keyword" name="keyword" required><br> <div class="sec"> <label>Distance(miles)</label><br> <input type="number" id="distance" name="distance" min="1" placeholder="10"> </div> <div class="sec"> <label>Category<i>*</i></label><br> <select id="category" name="category"> <option class="select-items" value="default" selected>Default</option> <option class="select-items" value="music">Music</option> <option class="select-items" value="sports">Sports</option> <option class="select-items" value="arts_theatre">Arts & Theatre</option> <option class="select-items" value="film">Film</option> <option class="select-items" value="miscellaneous">Miscellaneous</option> </select> </div> <label>Location<i>*</i></label> <input type="checkbox" id="autoloc" onclick="isAutoLoc()"><label style="color:lightgray;">Auto-Detect Location</label><br> <input type="text" id="location" name="location" required> <input type="submit" id="searchbt" class="button" value="SEARCH"> <input type="button" id="clearbt" class="button" value="CLEAR" onclick="clearSearch()"> </form> </div> <div class="table"> <p id="no_records">No Records Found</p> <table id="events_table"> <tr style="box-shadow: 0 5px 15px -5px gray; background-color: whitesmoke;"> <th>Date</th> <th>Icon</th> <th onclick="sortTable(2);" style="cursor: pointer;">Event</th> <th onclick="sortTable(3);" style="cursor: pointer;">Genre</th> <th onclick="sortTable(4);" style="cursor: pointer;">Venue</th> </tr> </table> </div> <div id="event_detail"></div> <div id="show_venue"> <p>Show Venue Details</p> <div id="arrow"></div> </div> <div id="venue_detail"> <div class="venue_content"> <h1 id="venue_detail_name"></h1> <img id="venue_detail_img"> <div class="venue_info"> <div class="address_content"> <div class="address_info"> <div class="address_tag">Address: </div> <div id="address_detail">2920 S Normandie Ave<br>Los Angeles, CA<br>90007<br></div> </div> <a href="#" id="map_link" target="_blank">Open in Google Maps</a> </div> <div class="more_content"> <a href="#" id="more_link" target="_blank">More events at this venue</a> </div> </div> </div> </div> </body> </html>