-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
70 lines (69 loc) · 4.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta description="An interactive heatmap that highlights attractions. Provides 'at a glance' hints for people exploring new places.">
<title>API Capstone Project</title>
<link rel="stylesheet" type="text/css" href="main.css">
<link rel="stylesheet" type="text/css" href="float-grid.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div class="background-shroud" id="js-background-shroud"></div>
<section class="welcome-screen">
<h1 class="h1-decoration">WARMER</h1>
<hr class="opening-decoration-hr1 opening-decoration-hr">
<hr class="opening-decoration-hr2 opening-decoration-hr">
<hr class="opening-decoration-hr3 opening-decoration-hr">
<hr class="opening-decoration-hr4 opening-decoration-hr">
<p>Find the best areas to explore, fast, using heatmap search.<br>
Choose your interests and click anywhere on the map to see where's hot.</p>
<button class="start-button">Go!</button>
</section>
<main aria-live="polite" hidden>
<header class="search-area">
<h1>WARMER</h1>
<hr class="main-decoration-hr1 main-decoration-hr">
<hr class="main-decoration-hr2 main-decoration-hr">
<hr class="main-decoration-hr3 main-decoration-hr">
<hr class="main-decoration-hr4 main-decoration-hr">
<aside>
<button class="help-button help" alt="Focus here for help."><i class="material-icons">help_outline</i></button>
<p aria-live="assertive" class="help-text" hidden></p>
</aside>
<form >
<section class="search-params-boxes">
<select aria-live="polite" class="select-place-type js-select-place-type">
<option class="option-place-type js-option-place-type collection" value="bar,night_club,casino" selected="selected">Nightlife</option>
<option class="option-place-type js-option-place-type collection" value="city_hall,church,synagogue,mosque,hindu_temple,library,museum,art_gallery">Culture</option>
<option class="option-place-type js-option-place-type collection" value="movie_theater,bowling_alley,aquarium,park,gym,stadium,spa">Leisure</option>
<option class="option-place-type js-option-place-type collection" value="meal_takeaway,bakery,restaurant">Food</option>
<option class="option-place-type js-option-place-type" value="cafe">Coffee</option>
<option class="option-place-type js-option-place-type collection" value="department_store,shopping_mall">Shopping</option>
</select>
<input type="search" aria-live="assertive" name="search-box" class="js-search-box search-box" id="js-search-box" placeholder="Click on the map or enter a district" required><p class="js-no-such-location-error-message no-such-location-error-message" title="Hide the sidebar" hidden></p>
</section>
<button class="search-button search-icon js-search-icon go-button js-go-button">
<i class="material-icons" alt="Click here to search" title="Click here to search">search</i></button>
</form>
</header>
<section class="results" aria-live="polite" id="js-results" hidden>
<div class="results-background" hidden></div>
<aside class="results-area" aria-live="assertive" id="js-results-area" hidden>
</aside>
<button class="toggle-show-results-button js-toggle-show-results-button hide-button""><i class="material-icons" alt="Click here to hide the sidebar" title="Hide the sidebar">keyboard_arrow_left</i></button>
</section>
</main>
<div class="js-map map" aria-live="polite" id="map"></div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<script src="index.js" type="text/javascript"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAwrO9kTCuS6Zimy4p4zCZMa-UUsgJ_7OU&libraries=visualization,places,geometry&callback=initMap"></script>
</body>
</html>